jQuery UI slider and spinner

  1. Home
  2. jQuery UI
  3. Slider & Spinner
Bootstrap CardsButtons Extended

The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles and ranges. The handle can be moved with the mouse or the arrow keys.

Basic Horizontal Sliders

Default slider.
Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.
Increment slider values with the step option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.
Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid animation duration.
The minimum value of the slider.
The maximum value of the slider.
Increment slider values with the step option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.
Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid animation duration.

Advance Horizontal Sliders

By default we only show the labels for the first and last points, shown below is an example of labels being applied to all pips.
It is possible to hide all the pips if we want a slider to show just the min/max values.
Instead of having the values shown for the first/last point, we could only show pips. This might be good when we just need to show the user how many options they have without showing explicit values.
If we need to add some content/context to our values, we can specify a prefix and/or suffix to spice things up. It would not be possible with css :before and :after because we already use these pseudo-elements for styling.
It's possible with rest: "tag" to set some custom labels to the slider instead of the default values. It's important to note here that the slider will still return its integer value when $(".slider").slider("value"); is called.
Here's another example using labels except here we replace roman numbers with the Chinese/Hanzi equivalent.
Steps can be a little complicated. The default slider allows us to skip along the slider in a pattern. eg: 0, 20, 40... Steps are hard-wired in to the slider and so the pips and labels will match the step value.
When a slider has the .slider("pips"); method applied to it, the pips method may also take a step option to allow additional control over the way pips are stepped visually. This option has no effect on the slider's functionality. The step value on the .slider("pips"); method is multiplicative; meaning it will only show every nth step that exists from the main .slider(); method.

Slider Colors

Slider Sizing

Vertical Sliders

Default Vertical Slider

25 60 40

Fixed Minimum Range

25 60 40

Fixed Maximum Range

25 60 40

Vertical Slider With Pips

20 6 12

Vertical Slider With Labels

2 8 5

Hide Labels & Pips

5 2 8

Default Style

25 60 40 40 40

Pip Style

5 2 8 6 3

Progress Bars

Examples

Default determinate progress bar.

This example shows progress bar with progress stripes. To add stripes, use .ui-progressbar-striped class to the bar container.

In this example progress bar uses animated stripes. To add stripes, use .ui-progressbar-striped-animated class to the bar container.

Examples

In this example the progress amount is visually represented with animated percentage values and message when complete. Progress : Complete!

In this example the maximum value is set to 1024 and value is set to 840 so the width is calculated accordingly.

Disables the progressbar if set to true.

Spinner

Simple Examples

Default spinner.
Example of a decimal spinner. Step is set to 0.01. The code handling the culture change reads the current spinner value, then changes the culture, then sets the value again, resulting in an updated formatting, based on the new culture.
Example of a donation form, with currency selection and amount spinner.
The minimum allowed value. The element's min attribute is used if it exists and the option is not explicitly set. If null, there is no minimum enforced. The maximum allowed value. The element's max attribute is used if it exists and the option is not explicitly set. If null, there is no maximum enforced.
Change Button HTML using _buttonHtml() function.

Advance Examples

Overflowing spinner restricted to a range of -10 to 10. For anything above 10, it'll overflow to -10, and the other way round.
A custom widget extending spinner. Use the Globalization plugin to parse and output a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down spins hours.
Dynamically set the value of the spinner to 5.
The size of the step to take when spinning via buttons or via the stepUp()/stepDown() methods. The element's step attribute is used if it exists and the option is not explicitly set.
Add option disabled: true to disable the spinner.