fast-slider

An implementation of a range slider as a form-connected web-component. Note that if the slider is in vertical orientation by default the component will get a height using the css var --fast-slider-height, by default that equates to (10px * var(--thumb-size)) or 160px. Inline style will override that height.

Usage

Live Editor
Result
01090100

Applying custom styles

import { customElement } from "@microsoft/fast-element";
import { Slider, SliderTemplate as template } from "@microsoft/fast-foundation";
import { SliderStyles as styles } from "./slider.styles";
@customElement({
name: "fast-slider",
template,
styles,
})
export class FASTSlider extends Slider {}