jQuery Slider: Range, Logarithmic and more

You need jQuery and jQuery UI

A CDN version:


https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

… and some styling:

You can either use the jQuery UI CSS or write some basic rules for the slider widget.

Option 1: Use the official jQuery UI CSS (7.3 KB):


https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css

Option 2: Add basic rules for the widget instead (see at the end of the post)

1. Simple Slider:

First, let’s see a simple slider. It goes from 0 to 10, starts on the middle (position 4), step size of 2:

See the Pen Simple Pricing Slider (jQuery) by Daniel Loureiro (@loureirorg) on CodePen.0

2. Range slider (two handlers: min and max):

See the Pen 2. Range Slider (jQuery) by Daniel Loureiro (@loureirorg) on CodePen.0

3. Fixed values (ex.[0, 100, 200, 500, 1000, 1500]):

See the Pen 3. Fixed values slider (jQuery) by Daniel Loureiro (@loureirorg) on CodePen.0

The idea is to use the slider as an index to the actual values:

4. Exponential / Logarithmic values (ex. [0, 10, 100, 1000, 1000]):

Instead of manually populate an array with the values, create a function to generate an exponential (or logarithmic or whatever) array.

Then, set values:

5. Formatting values:

Let's say you want to display values in a human format while keeping the inputs unformatted.

See the Pen 4. Formatted values slider (jQuery) by Daniel Loureiro (@loureirorg) on CodePen.0

a) Define min/max labels as span elements:

b) Create a function to format the values:

c) Whenever the slider is moved, set values for input and label. Do the same in the initializer:

6. "Any":

See the Pen 5. Any value slider (jQuery) by Daniel Loureiro (@loureirorg) on CodePen.0

For an any maximum, you can use a null value. For the minimum, 0 is the "any" minimum:


var values = [0, 100, 200, 500, 1000, 1500, null];

Basic styling rules for the widget:

If you want to save some bytes, you can manually define the CSS rules instead of using the jQuery UI CSS file.


#slider {
  width: 200px;
  margin-top: 20px;
}

.ui-widget-content {
  height: 4px;
  background-color: #b7b7b7;
  border: none;
  position: relative;
}

.ui-widget-header {
  background-color: #214472;
  position: absolute;
  height: 100%;
}

.ui-slider-handle {
  top: -8px;
  height: 20px;
  width: 20px;
  background-color: #214472;
  border-radius: 10px;
  border-color: #214472;
  position: absolute;
}
Close Menu