Range Slider

An accessible and flexible range slider web component.

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.

• CSS Custom Properties
• Web Components
• JavaScript modules Optional

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;
}