Home  >  Article  >  Web Front-end  >  jQuery jRange implements sliding selection numerical range special effects_jquery

jQuery jRange implements sliding selection numerical range special effects_jquery

WBOY
WBOYOriginal
2016-05-16 16:09:391844browse

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

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn