使用说明

引用CSS
<link rel="stylesheet" href="http://newfront.free4inno.com/plugin/slider/css/bootstrap-slider.min.css" />

引用JS
<script src="http://newfront.free4inno.com/plugin/slider/js/bootstrap-slider.min.js"></script>

定制使用

0GB

HTML

<div class="front-slider noselect">
    <input id="ex" data-slider-handle="round" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="20" data-slider-value="0" data-slider-tooltip="hide"/>
    <span id="plus" style="cursor: pointer" class="glyphicon glyphicon-plus"></span>
    <div style="display: inline-block; margin-left: 4px; margin-right: 4px;">
        <span class="slider-label" id="label">0</span><span>GB</span>
    </div>
    <span id="minus" style="cursor: pointer" class="glyphicon glyphicon-minus"></span>
</div>

JS

var object = $('#ex')
var slider = new Slider('#ex')
var label = $('#label')
var minValue = object.data('slider-min')
var maxValue = object.data('slider-max')

slider.on('slide', function (evt) {
    label.text(evt.value)
})

slider.on('change', function (evt) {
    label.text(evt.newValue)
})

$('#plus').click(function () {
    var currentVal = slider.getAttribute('step') + slider.getValue()
    if (currentVal > maxValue)
        return
    slider.setValue(currentVal)
    label.text(currentVal)
})

$('#minus').click(function () {
    var currentVal = slider.getValue() - slider.getAttribute('step')
    if (currentVal < minValue)
        return
    slider.setValue(currentVal)
    label.text(currentVal)
})

其他使用

http://seiyria.com/bootstrap-slider/