jquery swipe to select a range of values plug-in

Html

First load the jquery library file and Jrange related CSS files: jquery.range.css and plugins: jquery.range.js

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

Then put the following code where you want the slider selector to appear:

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

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

Jquery

Calling the Jrange plugin is very straightforward and uses the following code directly:

$(‘.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.

Option settings

Plug-in Jrange also provides some of the necessary option settings to meet a variety of needs.

Options	Description	Default value
From	The minimum value of the sliding range, the number, such as 0
To	The maximum value of the sliding range, the number, such as 100
Step	Step value, each sliding size	1
Scale	The scale label below the slider, the array type, such as [0,50,100]	[From,to]
Showlabels	Boolean type, whether to show the dimension label below the slider bar	True
Showscale	Boolean, whether the value label above the slider is displayed	True
Format	Numeric format	'%s '
Width	Slide Bar Width	300
Isrange	Whether to select a range.	False

For more information, please refer to Jrange project website: https://github.com/nitinhayaran/jRange

jquery swipe to select a range of values plug-in