Slider
An input where the user selects a value from within a given range.
Usage
Use standalone.
<Slider {...props} />Anatomy
The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.
<span class="whole">
<span class="left">{left}</span>
<input class="main" {...rest} type="range" {min} {max} />
<datalist conditional>
{#each options as option}
<option value={option}></option>
{/each}
</datalist>
<span class="right" conditional>{right}</span>
</span>Props
| Name | Type | Default | Description |
|---|---|---|---|
min* | number | - | Lower range bound of the slider |
max* | number | - | Upper range bound of the slider |
left | Snippet | - | Content before the input; receives value, variant, and input element |
right | Snippet | - | Content after the input; receives value, variant, and input element |
value | number | min+((max-min)/2) | Bindable slider value |
step | number | 1 | Increment between valid values; can also be "any" |
options | SvelteSet | - | Numeric datalist suggestions |
fillRange | Range | { min: 5, max: 95 } | Controls the rate limits for the linear-gradient track fill |
cssvar | Record | - | Renames the custom properties the gradient reads |
attach | Attachment | - | Svelte attachment on the input |
element | HTMLInputElement | - | Bindable input element |
styling | SVSClass | - | Styling override |
variant | SVSVariant | NEUTRAL | Variant |
* required. Other HTMLInputAttributes are passed to <input> via rest props; class is merged onto the control.
When appearance is set to none, the background-color is used by default to style the input element's track. In this case, different colors are applied to the left and right sides of the thumb. This behavior is controlled using Svelte's reactive functionality. --color-active is applied to the left of the thumb and --color-inactive to the right; these are intentionally not --svs--prefixed so a Tailwind theme color named active / inactive is picked up automatically, and cssvar can rename them. To disable this behavior, override the background-color property of the input element using !important.
Styling
To learn more, see Styling.
Variant Management
No automatic switching.
Default Class Name
svs-slider
Behavior
--color-active / --color-inactive are intentionally not --svs--prefixed so a Tailwind theme color named active/inactive is picked up with no extra wiring.
Accessibility
ARIA Roles and Attributes
The component does not apply managed ARIA attributes automatically; the native range input exposes its value semantics.
Provide an accessible name yourself because there is no built-in visible label. Pass aria-label or aria-labelledby through the rest props, or associate a <label> with the range input.
Standards Basis
Slider is built on a native <input type="range">, so keyboard and assistive-technology support follows the browser standard for range inputs, including arrow-key and Home / End value changes. See the Concepts standards-first guidance for the library's approach.
Exports
Types
type Range = { min: number; max: number };
type SliderCssVar = "active" | "inactive";
interface SliderProps extends Omit<HTMLInputAttributes, "type" | "value" | "min" | "max" | "list" | "style"> {
min: number;
max: number;
left?: Snippet<[number, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
right?: Snippet<[number, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
value?: number; // bindable (min+((max-min)/2))
step?: number | "any"; // (1)
options?: SvelteSet<number> | Set<number>;
fillRange?: Range; // ({ min: 5, max: 95 }); linear-gradient rate limit of slider's track
cssvar?: Partial<Record<SliderCssVar, string>>;
attach?: Attachment<HTMLInputElement>;
element?: HTMLInputElement; // bindable
styling?: SVSClass;
variant?: SVSVariant; // (VARIANT.NEUTRAL)
// class & other HTMLInputAttributes are passed to <input> via ...rest (class is merged onto the control)
// style is component-owned (omitted)
}
type SliderReqdProps = "min" | "max";
type SliderBindProps = "value" | "element";Others
No additional exports are available.
Examples
The example code uses Tailwind CSS along with SVSClass.