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 styles will override that height.

Setup

Basic Setup

import {
    provideFASTDesignSystem,
    fastSlider,
    fastSliderLabel
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastSlider(),
        fastSliderLabel()
    );

Customizing the Thumb

import {
    provideFASTDesignSystem,
    fastSlider,
    fastSliderLabel
} from "@microsoft/fast-components";

provideFASTDesignSystem()
    .register(
        fastSlider({
            thumb: `...your thumb...`
        }),
        fastSliderLabel()
    );

Usage

Live Editor

<fast-slider min="0" max="100" step="10" value="70">
    <fast-slider-label
        position="0"
    >
        0
    </fast-slider-label>
    <fast-slider-label
        position="10"
    >
        10
    </fast-slider-label>
    <fast-slider-label
        position="90"
    >
        90
    </fast-slider-label>
    <fast-slider-label
        position="100"
    >
        100
    </fast-slider-label>
</fast-slider>

<fast-slider min="0" max="100" step="10" value="70">
    <fast-slider-label
        position="0"
    >
        0
    </fast-slider-label>
    <fast-slider-label
        position="10"
    >
        10
    </fast-slider-label>
    <fast-slider-label
        position="90"
    >
        90
    </fast-slider-label>
    <fast-slider-label
        position="100"
    >
        100
    </fast-slider-label>
</fast-slider>

Result

Create your own design

Slider

import {
    Slider,
    SliderOptions,
    sliderTemplate as template,
} from "@microsoft/fast-foundation";
import { sliderStyles as styles } from "./my-slider.styles";

export const mySlider = Slider.compose<SliderOptions>({
    baseName: "slider",
    template,
    styles,
    thumb: `...default thumb...`,
});

SliderLabel

import {
    SliderLabel,
    sliderLabelTemplate as template,
} from "@microsoft/fast-foundation";
import { sliderLabelStyles as styles } from "./my-slider-label.styles";

export const mySliderLabel = SliderLabel.compose({
    baseName: "slider-label",
    template,
    styles,
});

API

Functions

Name	Description	Parameters	Return
`convertPixelToPercent`	Converts a pixel coordinate on the track to a percent of the track's range	`pixelPos: number, minPosition: number, maxPosition: number, direction: Direction`	`number`

class: `Slider`

Superclass

Name	Module	Package
`FormAssociatedSlider`	/src/slider/slider.form-associated.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
`readOnly`	public	`boolean`		When true, the control will be immutable by user interaction. See readonly HTML attribute for more information.
`valueAsNumber`	public	`number`		The value property, typed as a number.
`valueTextFormatter`	public	`(value: string) => string or null`		Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
`min`	public	`number`	`0`	The minimum allowed value.
`max`	public	`number`	`10`	The maximum allowed value.
`step`	public	`number`	`1`	Value to increment or decrement via arrow keys, mouse click or drag.
`orientation`	public	`Orientation`		The orientation of the slider.
`mode`	public	`SliderMode`		The selection mode.
`keypressHandler`	protected
`proxy`					FormAssociatedSlider
`$presentation`	public	`ComponentPresentation or null`		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
`template`	public	`ElementViewTemplate or void or null`		Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
`styles`	public	`ElementStyles or void or null`		Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`increment`	public	Increment the value by the step		`void`
`decrement`	public	Decrement the value by the step		`void`
`setThumbPositionForOrientation`	public	Places the thumb based on the current value	`direction: Direction`	`void`
`templateChanged`	protected			`void`	FoundationElement
`stylesChanged`	protected			`void`	FoundationElement

Events

Name	Type	Description	Inherited From
`change`		Fires a custom 'change' event when the slider value changes

Attributes

Name	Field	Inherited From
`readonly`	readOnly
	min
	max
	step
`orientation`	orientation
`mode`	mode

CSS Parts

Name	Description
`positioning-region`	The region used to position the elements of the slider
`track-container`	The region containing the track elements
`track-start`	The element wrapping the track start slot
`thumb-container`	The thumb container element which is programatically positioned

Slots

Name	Description
`track`	The track of the slider
`track-start`	The track-start visual indicator
`thumb`	The slider thumb
	The default slot for labels

Variables

Name	Description	Type
`SliderMode`	The selection modes of a @microsoft/fast-foundation#(Slider:class).	`{ singleValue: "single-value", }`

class: `SliderLabel`

Superclass

Name	Module	Package
`FoundationElement`	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
`position`	public	`string`		The position of the label relative to the min and max value of the parent @microsoft/fast-foundation#(Slider:class).
`hideMark`	public	`boolean`	`false`	Hides the tick mark.
`disabled`	public	`boolean`		The disabled state of the label. This is generally controlled by the parent @microsoft/fast-foundation#(Slider:class).
`$presentation`	public	`ComponentPresentation or null`		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
`template`	public	`ElementViewTemplate or void or null`		Sets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.	FoundationElement
`styles`	public	`ElementStyles or void or null`		Sets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.	FoundationElement

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`templateChanged`	protected			`void`	FoundationElement
`stylesChanged`	protected			`void`	FoundationElement

Attributes

Name	Field	Inherited From
`position`	position
`hide-mark`	hideMark
`disabled`	disabled

CSS Parts

Name	Description
`root`	The element wrapping the label mark and text

Slots

Name	Description
	The default slot for the label content

Setup​

Basic Setup​

Customizing the Thumb​

Usage​

Create your own design​

Slider​

SliderLabel​

API​

Functions​

class: Slider​

Superclass​

Fields​

Methods​

Events​

Attributes​

CSS Parts​

Slots​

Variables​

class: SliderLabel​

Superclass​

Fields​

Methods​

Attributes​

CSS Parts​

Slots​

Additional resources​

Setup

Basic Setup

Customizing the Thumb

Usage

Create your own design

Slider

SliderLabel

API

Functions

class: `Slider`

Superclass

Fields

Methods

Events

Attributes

CSS Parts

Slots

Variables

class: `SliderLabel`

Superclass

Fields

Methods

Attributes

CSS Parts

Slots

Additional resources