FooterSlider

A slider: the track, the part of it that is set, and the handle.

@internote/canvas-sdk/reactComponent
On this page
import { FooterSlider } from '@internote/canvas-sdk/react';

Built rather than borrowed from the browser, so it sits in a row of maths without looking like it came from somewhere else. While a drag is running the handle follows the pointer exactly and the value it reports is stepped; the arrow keys move one step and a double-click returns to origin.

#Props

Takes no className, style or id.

ariaLabelRequired
The slider's accessible name.
string
disabled
Whether the slider is shown but cannot be moved: no drag, no keys, out of the tab order.
boolean
maxRequired
The value at the track's right end.
number
minRequired
The value at the track's left end.
number
onChangeRequired
Called as the reader drags, clicks, presses an arrow key or double-clicks, with the stepped value.
(value: number) => void
origin
Marked on the track, where there is one worth returning to — and the value a double-click returns to.
number
stepRequired
The grid reported values snap to, and how far one arrow key moves.
number
valueRequired
The current value.
number

#Example

<FooterSlider value={bandwidth} min={0.1} max={5} step={0.1} origin={1} ariaLabel="Bandwidth" onChange={setBandwidth} />

Declared in packages/canvas-sdk/src/react/footer-controls.tsx:394.

Last updated