(Almost) Pure CSS Responsive Range Slider
Description
A range slider that allows for non-numeric custom values, utilizing an array of radio inputs. It's only almost purely built with css, since some JS is still required for drag/touch events. Those events are optional though and selection by click/tap of a slider point is achieved without requiring JS.
Demo
Usage
Prerequisites
See the example on how to structure your HTML. The required class name of the root container is range-slider
.
Note that input should have the type
of radio
and a common name
. Every input must have a unique id
and
must be immediately followed by a label
with the according for
attribute.
If you require selection on mouseover
and touchmove
events, you must integrate range-slider-events.min.js
before
the closing body tag.
Example
First Point Second Point Third Point Fourth Point Fifth Point
Customization
To alter colors find the accordings variables in src/range-slider.scss
License
MIT