在沒步入正文之前,先給大家貼效果圖,看看是不是您想要的效果:
基于jQuery移動端滑塊拖動設置代碼。這是一款支持手機移動端的特效,可拖動滑塊范圍選擇器,拖動滑塊數值選擇器。
廢話不多說了,直接給大家貼代碼了。
html代碼:
<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代碼:
$(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); }); });
新聞熱點
疑難解答