Slider
An input where the user selects a value from within a given range.
Anatomy
The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.
<span class={cls(PARTS.WHOLE, variant)}>
<span class="left">{left}</span>
<input class="main" type="range" min={range.min} max={range.max} {step} {...attrs} bind:value bind:this={element} use:action />
<datalist conditional>
{#each options as option}
<option value={option}></option>
{/each}
</datalist>
<span class="right" conditional>{right}</span>
</span>Props
Type
(value) indicates the default value for the prop.
interface SliderProps {
range: Range; // bindable
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>;
background?: Range; // ({ min: 5, max: 95 }); linear-gradient rate limit of slider's track
attributes?: HTMLInputAttributes;
action?: Action;
element?: HTMLInputElement; // bindable
styling?: SVSClass;
variant?: string; // bindable (VARIANT.NEUTRAL)
}Additional Props
background- Controls the rate limits forbackground-color: linear-gradient;applied to the input element
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. The CSS custom property --color-active is applied to the left side, and --color-inactive to the right side. 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
Exports
Types
type Range = { min: number, max: number };
type SliderReqdProps = "range";
type SliderBindProps = "range" | "value" | "element" | "variant";Others
No additional exports are available.
Examples
The example code uses Tailwind CSS along with SVSClass.