GOOCODE - Find your code/scripts

8 Sometimes we need to select the page range of values, such as selected shopping price range, select independent CPU, memory size, configuration, etc. When you purchase a host, using an intuitive slider bar directly select the desired numerical size without the need to manually input values, simple and easy to operate.

This article will introduce a range selector plug jRange, which is based on jQuery's a simple plug-in. Here we see the use of plug-jRange.
HTML
First load jQuery library files and jRange related css file: jquery.range.css and plug-ins: jquery.range.js

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

Then choose where you want the slide show into the following code:

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

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

jQuery
Call jRange plugin is very simple, direct with the following code:

$('.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, you will see the effect of DEMO.

Option
Plug-jRange also provides the necessary set of options to meet a variety of needs. You can go to https://github.com/nitinhayaran/jRange to see in detail.