Slider

Effortless smooth values and ranges sliders

DEMO

INFO

Features

• Mobile friendly
• Single value
• Multiple values
• Single range
• Multiple ranges
• Linked ranges
• Events
• Formatting
• MultiTouch
• Vertical

Slide it

const someSlider = new Slider(container, options);

See examples in main.js file.

Values | ranges

• Slider mode is automatic
• Number of values == number of colors = value slider
• Number of values == 2x number of colors = range slider
• Number of values == number of colors - 1 = linked ranges slider

Options

• min : minimum value
• max : maximum value
• val : initial values
• col : color palette
• num : number of values (if val not defined)
• stp : step value
• rng : min range size
• fmt : format function
• dir : 1 = vertical slider

Events

Use "on" and "off" methods :

someSlider.on("slide", vals => console.log(vals));

• start : slide started
• slide : ongoing slide
• change : after slide

Data

Values getter & dispatched events data structure depends on slider mode :

• Single value : number
• Multiple values : array of numbers
• Range (single, multiple, linked) : array of ranges [min, max]

Styling

Edit slider.css root section

Code

• No dependencies
• 6k JS + 2.3k CSS
• Compiled & minified with closure compiler & sass

Next

• Callbacks dispatcher
• Keyboard controls
• Accessibility