jQuery+jRange to achieve sliding selection of numerical range effects

Sometimes we need to select the range of values on the page, such as price range when shopping, CPU when buying a host, memory size configuration, etc. We can directly select the desired value size by using intuitive slider bar, without manually entering the value, which is easy and convenient to operate.

HTML

First, load the jQuery library files and jRange related css files: jquery.range.css and plug-ins: jquery.range.js

<script src="jquery.js"></script> 

<link rel="stylesheet" href="jquery.range.css"> 

<script src="jquery.range.js"></script> 

Then place the following code where the slider selector needs to be displayed:

<input type="hidden" class="slider-input" value="23" /> 

We used a text field of type hiiden and set the default value value, such as 23.

jQuery

Calling the jRange plug-in is straightforward, with the following code:

$('.single-slider').jRange({ 

    from: 0, 

    to: 100, 

    step: 1, 

    scale: [0,25,50,75,100], 

    format: '%s', 

    width: 300, 

    showLabels: true, 

    showScale: true 

}); 

Then run your page and you will see the effect in DEMO.

Option is set

The plug-in jRange also provides some necessary options to meet various requirements.

选项	说明	默认值
from	滑动范围的最小值，数字，如0
to	滑动范围的最大值，数字，如100
step	步长值，每次滑动大小	1
scale	滑动条下方的尺度标签，数组类型，如[0,50,100]	[from,to]
showLabels	布尔型，是否显示滑动条下方的尺寸标签	true
showScale	布尔型，是否显示滑块上方的数值标签	true
format	数值格式	"%s"
width	滑动条宽度	300
isRange	是否为选取范围。	false

Please refer to the jRange project website for more information: https: / / github com/nitinhayaran/jRange

The above is the entire content of this article, there is a need for a small friend reference, I hope you can like.