jQuery+jRange数值范围选择控件_鼠标拖动数值范围

来源:https://www.sucaihuo.com/js/42.html 2015-04-08 08:52浏览(8032) 收藏

本文用两个例子向大家介绍一款范围选择器插件jRange。
jQuery+jRange数值范围选择控件_鼠标拖动数值范围
分类:其它特效 > 范围选择 难易:中级
查看演示 下载资源 下载积分: 20 积分

老惯例引入jQuery库文件及jRange插件。

<link rel="stylesheet" href="jquery.range.css"> 
<script src="jquery.js"></script> 
<script src="jquery.range.js"></script>

然后我们放两个demo。第一个demo只可以滑动结束点,第二个可以滑动开始点和结束点。

<div class="demo">
   <input type="hidden" class="single-slider" value="23" />
   <button id="g1">获取值</button>
</div>
<div class="demo">
   <input class="range-slider" type="hidden" value="25,75"/>
   <button id="g2">获取值</button>
</div>

jQuery

接着我们调用jRange获取选取的范围值:

$(function() {
    $('.single-slider').jRange({
        from: 0, //滑动范围的最小值,数字,如0
        to: 100, //滑动范围的最大值,数字,如100
        step: 1,//步长值,每次滑动大小
        scale: [0, 25, 50, 75, 100],//滑动条下方的尺度标签,数组类型,如[0,50,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);
    });
});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2