基于jquery实现鼠标左右拖动滑块滑动附源码下载

在没步入正文之前，先给大家贴效果图，看看是不是您想要的效果：

在线演示源码下载
基于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）; }）; }）;