<style>

.ui-slider{width:210px;background:#ddd;border:0;border-bottom:1px solid #fff;border-top:1px solid #adadad;border-radius:5px;box-shadow:inset 0 1px 2px #adadad;height:10px;margin:5px}
.ui-slider .ui-slider-handle{background-color:#98aec3;background-image:-webkit-linear-gradient(center top,#98aec3,#7b8c9c);background-image:-moz-linear-gradient(center top , #98aec3, #7b8c9c);background-image:-ms-linear-gradient(center top , #98aec3, #7b8c9c);background-image:-o-linear-gradient(center top , #98aec3, #7b8c9c);border:1px solid #758390;border-radius:2px;cursor:pointer;height:15px;width:10px;}
.ui-slider .ui-slider-range{border:1px solid #d08403;box-shadow:inset 0 1px 1px #febc39;height:10px;background-color:#fda800;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fda800), color-stop(100%, #e39200));background-image:-webkit-linear-gradient(top, #fda800, #e39200);background-image:-moz-linear-gradient(top, #fda800, #e39200);background-image:-ms-linear-gradient(top, #fda800, #e39200);background-image:-o-linear-gradient(top, #fda800, #e39200);background-image:linear-gradient(top, #fda800, #e39200);top:-1px;}
.ui-slider .fts-handle-label-container{position:relative;}
.ui-slider .fts-handle-label-container .fts-handle-label{border:1px solid #5c6771;border-radius:3px;color:#fff;display:inline-block;*display:inline;zoom:1;background-color:#798a99;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #798a99), color-stop(100%, #5c6771));background-image:-webkit-linear-gradient(top, #798a99, #5c6771);background-image:-moz-linear-gradient(top, #798a99, #5c6771);background-image:-ms-linear-gradient(top, #798a99, #5c6771);background-image:-o-linear-gradient(top, #798a99, #5c6771);background-image:linear-gradient(top, #798a99, #5c6771);padding:5px 8px;position:absolute;text-shadow:-1px -1px 1px rgba(0,0,0,0.5);top:-35px;left:-18px;white-space:nowrap;width:26px; text-align:center;}
.fina-item .ui-slider .fts-handle-label-container .fts-handle-label:after{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #5c6771;content:" ";position:absolute;bottom:-6px;left:16px;}

</style>

<input id="currentMonth" type="hidden" value="http://www.mamicode.com/6月" />
<div id="loan-slider"></div>

<script tyep="text/javascript">

var months =[‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘9‘,‘10‘,‘11‘,‘12‘,‘13‘,‘14‘,‘15‘,‘16‘,‘17‘,‘18‘,‘19‘,‘20‘,‘21‘,‘22‘,‘23‘,‘24‘];
var loanwidth=$(‘#loan-slider‘).width();
var loanNum=parseInt($(‘#currentMonth‘).val());
$(‘#loan-slider‘).slider({
    min: 1,
    max: months.length,
    orientation:‘horizontal‘,
    step: loanwidth/months.length-1,
    value: loanNum,
    range: ‘min‘,
    create: function(e, ui) {
        $(this).find(‘.ui-slider-handle‘).append(‘<div class="fts-handle-label-container"><span class="fts-handle-label" id="total-loan-value-span">‘ + $(‘#currentMonth‘).val() + ‘</span></div>‘);
    },
    slide: function(e, ui) {
        var thisHandle = $(ui.handle);
        thisHandle.attr(‘aria-valuenow‘,ui.value).find(‘.fts-handle-label-container .fts-handle-label‘).text(ui.value+‘月‘);
        $(‘#currentMonth‘).val(ui.value+‘月‘)
    }        
}).draggable();

</script>