1.3.7 • Published 4 years ago
afix-range-slider v1.3.7
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-sliderAnd 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;
}