afix-range-slider

An accessible and flexible range slider web component.

Usage no npm install needed!

<script type="module">
  import afixRangeSlider from 'https://cdn.skypack.dev/afix-range-slider';
</script>

README

Range Slider

An accessible and flexible range slider web component.

HSL RGB With borders

Using it

Via a script tag,

<script src="https://cdn.skypack.dev/afix-range-slider@latest" type="module"></script>

Or install with

npm install afix-range-slider

And use like this

import "afix-range-slider"`

<afix-range-slider value="50" min="25" max="75" />

Browser Support

This component depends on the following features.

All modern browsers have supported these features for some time. If you need IE support you will need to look elsewhere.

Attributes

Name Type Description
value number The current value of the input
shadow-value number A secondary value shown with the value. color should be set to something semi-transparent with this setting.
min number The minimum permitted value
max number The maximum permitted value
step number The stepping interval, used both for user interface and validation purposes
position-indicator bar or line The style of the position indicator, either a solid bar or a line.
horizontal boolean The input should be displayed horizontally. Vertical by default

CSS Custom Properties

Remember all custom properties are prefixed with the component name. e.g. background-color is --afix-range-slider-background-color.

Name Default Description
track-background-color currentColor The track color
track-background-image none The background-image for the track
track-line-color none The color of the line when position-indicator="line"
width 3.75rem vertical, 12rem horizontal Width of the range
height 10rem vertical, 3.75rem horizontal Height of the range
background-color rgba(0, 0, 0, 0.8) background-color for the range element
background-image none background-image for the range element
border none border for the range element

Events

change

A MessageEvent where the shape of data conforms to the following interface:

interface RangeSliderChange {
  // Good for presenting to the user - The boundedValue to a fixed number of places based on the step attribute.
  value: number;
  // Good for using in calculations, more precise than value - the raw input value after minmax(value)
  rawValue: number;
}