JQuery slide selection value range plug-in (similar to Alibaba Cloud selected host configuration)

Sometimes we need to select a value range on the page, for example, when purchasing a price range, when purchasing a host, we need to select the CPU, memory size configuration, etc, use the intuitive slider bar to directly select the desired value. You do not need to manually enter the value, which is simple and convenient.

The effect is as follows:

 

This article introduces a range selector plug-in jRange, which is a simple plug-in based on jQuery. This site has a similar article: jQuery + CSS uses the slider to select the price range. The poor part is that jqueryui's huge plug-in library is used. If you are interested, you can check it out. Let's take a look at the use of the plug-in jRange.
HTML
First, load the jQuery library file and the jRange-related css file: jquery.range.css and plug-in: jquery. range. js
 
<Script src = "jquery. js"> </script>
<Link rel = "stylesheet" href = "jquery.range.css">
<Script src = "jquery. range. js"> </script>

Then place the following code at the position where the slider selector needs to be displayed:
 
<Input type = "hidden" class = "slider-input" value = "23"/>

We use the hiiden text field and set the default value, such as 23.

Calling the jRange plug-in is very simple. Use the following code:
 
$ ('. Single-slider'). jRange ({
From: 0,
To: 100,
Step: 1,
Scale: [100,],
Format: '% s ',
Width: 300,
ShowLabels: true,
ShowScale: true
});

The plug-in jRange also provides some necessary options to meet various requirements.

  Option Description Default value From The minimum value of the sliding range, such as 0.   To The maximum sliding range, such as 100.   Step Step size, size of each slide 1 Scale The scale label at the bottom of the slider, which is an array type, for example, [100,]. [From, to] ShowLabels Boolean: whether the size label below the slide bar is displayed. True ShowScale Boolean, whether to display the value label above the slider True Format Value Format "% S" Width Slider width 300 IsRange Whether it is the selected range. False