Home > Article > Web Front-end > 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
Then put the following code where you need to display the slider selector:
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:
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
위 내용은 이 글의 전체 내용입니다. 필요하신 분들은 참고하시면 좋겠습니다.