jQuery jRange implements sliding selection numerical range special effects_jquery

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	선택 범위인지.	거짓

자세한 내용은 jRange 프로젝트 공식 웹사이트를 참조하세요: https://github.com/nitinhayaran/jRange

위 내용은 이 글의 전체 내용입니다. 필요하신 분들은 참고하시면 좋겠습니다.