Before entering the main text, let me post a rendering to see if it is the effect you want:
Online demo Source code download
Based on jQuery mobile slider dragging setting code. This is a special effect that supports mobile phones. You can drag the slider range selector and drag the slider value selector.
No more nonsense, let me just post the code for you.
html code:
<div class="demo"> <input type="hidden" class="single-slider" value="0" /> <!-- <button id="g1">获取值</button> --> </div> <div class="demo"> <input class="range-slider" type="hidden" value="10,89" /> <!-- <button id="g2">获取值</button> --> </div>
js code:
$(function () { $('.single-slider').jRange({ from: 0, to: 100, step: 1, scale: [0, 25, 50, 75, 100], format: '%s', width: 300, showLabels: true, showScale: true }); $('.range-slider').jRange({ from: 0, to: 100, step: 1, scale: [0, 25, 50, 75, 100], format: '%s', width: 300, showLabels: true, isRange: true }); $("#g1").click(function () { var aa = $(".single-slider").val(); alert(aa); }); $("#g2").click(function () { var aa = $(".range-slider").val(); alert(aa); }); });