jQuery jRange implements sliding selection numerical range special effects

jQuery jRange implements sliding selection numerical range special effects_jquery

WBOY

Release： 2016-05-16 16:09:39

Original

1813 people have browsed it

Sometimes we need to select a value range on the page, such as selecting a price range when shopping, selecting the CPU, memory size configuration, etc. when purchasing a host. You can use the intuitive slider bar to directly select the desired value without manual work. Entering numerical values is simple and convenient.

HTML

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

Copy code The code is as follows:

Then put the following code where you need to display the slider selector:

Copy code The code is as follows:

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

jQuery

Calling the jRange plug-in is very simple, just use the following code:

Copy code The code is as follows:

$('.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 webpage and you will see the effect in the DEMO.

Option settings

The plug-in jRange also provides some necessary option settings to meet various needs.

Options	Description	Default value
from	The minimum value of the sliding range, a number, such as 0
to	The maximum value of the sliding range, a number, such as 100
step	Step value, size of each slide	1
scale	Scale label under the slider, array type, such as [0,50,100]	[from,to]
showLabels	Boolean type, whether to display the size label below the slider	true
showScale	Boolean type, whether to display the numerical label above the slider	true
format	Numerical format	"%s"
너비	슬라이더 바 너비	300
isRange	선택 범위인지.	거짓