Flex-range NPM

FlexRange

A flexible vanilla JavaScript range slider

Note: This is an experimental project. Its not recommended to use it in production.

CodePen Demo

Installation

npm install flex-range

or import from cdn: import { FlexRange } from 'https://cdn.skypack.dev/flex-range'

Usage

HTML:

<input id="slider" type="range" />

All slider options can also be set with data-attributes:

<input id="slider" type="range" data-min="0" data-max="100" data-from="10" data-to="90" />

JS:

import { FlexRange } from 'flex-range';

// initialize slider instance
const slider = new FlexRange('#slider', {
    min: 0,
    max: 100,
    from: 10,
    to: 90,
});

// update slider values
slider.update({ from: 20, to: 80 });

// listen to changes
slider.on('change', (event) => {
    console.log(event.values);
});

Note: to prevent the slider from firing the change event when calling update(), set the second argument to false (e.g. slider.update({ from: 1 }, false)).

Options:

Name	Description
min	minimum value
max	maximum value
from	initial value 'from'
to	initial value 'to'

Methods:

Name	Description
update()	update one or more slider values
reset()	reset the slider to its initial values
on()	listen to events

Events:

Name	Description
change	fires when a slider value changes
update	fires only when the slider values get updated with `update()`
reset	fires on form reset or when `reset()` is called

SCSS:

@use 'flex-range';

Customize

Example for overriding variables:

@use 'flex-range' with (
    $fr-primary-color: #0150ce,
    $fr-bar-width: 0.2rem,
    $fr-handle-size: 1.25rem,
    $fr-handle-color: #0150ce,
    $fr-handle-border: none,
);

All default variables:

// general variables
$fr-primary-color: hsl(0deg, 0%, 33%) !default;

// bar variables
$fr-bar-width: 0.2rem !default;
$fr-bar-color: hsl(0deg, 0%, 80%) !default;
$fr-bar-range-color: $fr-primary-color !default;

// handle variables
$fr-handle-size: 2rem !default;
$fr-handle-color: white !default;
$fr-handle-border-color: $fr-primary-color !default;
$fr-handle-active-color: $fr-primary-color !default;
$fr-handle-border: 0.2rem solid $fr-handle-border-color !default;
$fr-handle-border-radius: 50% !default;
$fr-handle-shadow: none !default;