基于jQuery移动端滑块拖动设置代码

基于jQuery移动端滑块拖动设置代码

2016-04-26 16:18:01 来源: 阅读:

基于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);
          });
      });

via：http://www.w2bc.com/article/2015-11-18-jquery-slide-huaikua

爱程序网

Tags：[db:关键字]