Slider

A range slider for selecting a numeric value.

import { ... } from '@corndev/ui'

Volume

60%

HTML

No JavaScript required — these classes are the whole component.

<label class="corn-label" for="volume">Volume</label>
<input type="range" id="volume" class="corn-slider" data-size="md" min="0" max="100" />

Classes

Class
`.corn-slider`

Attributes

Attribute	Values
`data-size`	`sm\|md\|lg`

Vanilla JS

Optional. createSlider only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createSlider } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createSlider(el, { /* options */ });

Options

Option	Type	Default
`disabled`	`boolean`	`false`
`size`	`'sm'\|'md'\|'lg'`	`'md'`

React

Slider — from @corndev/ui-react.

The props are the same as the options above, plus className.

Sizes

<Slider size="sm" aria-label="Volume" defaultValue={30} />
<Slider size="md" aria-label="Volume" defaultValue={50} />
<Slider size="lg" aria-label="Volume" defaultValue={70} />

Disabled

<Slider disabled aria-label="Volume" defaultValue={40} />