Slider is a simple standard slider widget. It can work as a standalone widget or be assigned to any element, which it will update.

Get the latest version right here

All the source code of the project is available under terms of the MIT license

For some standard usage examples see the demo page


top ↑Features List

  • Comes in a single tiny (2k gzipped) file
  • Works as standalone widget or can be assigned to another element
  • Can be generated or initialized on existing elements
  • Pure CSS based design, comes with basic styles
  • Supports both, vertical and horizontal sliders
  • Has no drag-n-drop dependency

top ↑Usage Basics

new Slider({min: 0, max: 100, value: 20})

You can go even simpler and just create a tags structure with your options like that

<div class="rui-slider" data-slider="{min:0,max:100,update:'my-input'}">
<div class="level"></div>
<div class="handle"></div>

When the page is loaded our script will automatically find and initialize your slider

top ↑Assigned Sliders

You can assign any slider to work in pair with any input or content elements on your page, so that when you move the slider it was automatically updating the input element value or a content element innerHTML property.

// with an option
new Slider({update: 'my-element'});

// or with a direct call
new Slider({...}).assignTo('my-element');

NOTE: when you assign a slider to work with an input element, it works both ways, if you change the slider it will change the value of the input element, and if you change the input element it will move the slider.

top ↑Vertical Sliders

For vertical sliders use the direction option or a css-class rui-slider-vertical like that

new Slider({direction:'y', ....})

// or with a html structure
<div class="rui-slider right-slider-vertical" ...>
<div class="level"></div>
<div class="handle"></div>

top ↑Options List

You can use the following list of options with the Slider constructor or the data-slider attribute

min0the min value
max100the max value
snap0the values threshold
valuenullstart value, if null then the min value will be used
direction’x’slider direction ‘x’, ‘y’
updatenullreference to an element to update
round0the number of symbols after the decimal pointer

top ↑Events List

There is just one event with this widget, the name is change.

top ↑API Reference

All the Slider class instances have the following public methods

setValue(value)the value assignment method
getValue()current value getter
assignTo(element)assign this slider to update the element

top ↑Style Alterations

The tags structure for this widget is as simple as it is.

// horizontal slider
<div class="rui-slider">
<div class="level"></div>
<div class="handle"></div>

// vertical slider
<div class="rui-slider rui-slider-vertical">
<div class="level"></div>
<div class="handle"></div>