Components / Input controls

Slider

Component + manager

Displays a styled slider for numeric input, supporting single or multiple thumbs, highlighting ranges, and optional 'Set Null'.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentSlider

Managercreate_slider_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Slider, create_slider_manager } from "sveltekit-ui"

  const manager = create_slider_manager({
    label: "Volume",
    name: "volume",
    val: 50,
    min: 0,
    max: 100,
    step: 5,
  })
</script>

<Slider {manager} />
<p>Volume: {manager.val}%</p>

API reference

Configure the manager, call its methods, and read its reactive state.

24 entries in configuration

Property	Type	Default	Description
`val`	`number or number[]`	`0`	Current value(s). If an array is provided, multiple thumbs appear.
`min`	`number`	`0`	Minimum value range.
`max`	`number`	`2`	Maximum value range.
`step`	`number`	`0.01`	Value increment steps.
`on_change`	`function`	`null`	Called with new value(s) when changed (pointer move or arrow key).
`on_down`	`function`	`null`	Called with new value when pointer is pressed.
`on_up`	`function`	`null`	Called with final value(s) when pointer is released.
`label`	`string or null`	`null`	Label text displayed above the slider.
`name`	`string`	`slider`	Name attribute for potential form usage.
`label_font_size`	`number`	`1.2`	Size in rem for label text.
`is_required`	`boolean`	`false`	Whether the field is required for form submission.
`is_read_only`	`boolean`	`false`	If true, the slider can't be changed.
`font_size`	`number`	`1`	Base text size for the slider thumb.
`is_disabled`	`boolean`	`false`	If true, slider is disabled. If val is null and is_nullable is false, defaults to true.
`is_nullable`	`boolean`	`false`	If true, a 'Set Null' / 'Select Value' button toggles val between null and min.
`color`	`CSS color`	`var(--primary-t)`	Color used for highlight track background and thumb details.
`is_short`	`boolean`	`false`	If true, uses a more compact thumb design.
`is_show_text`	`boolean`	`true`	If false, hides numeric text on thumb.
`ml`	`number`	`0`	Margin-left in rem.
`mr`	`number`	`0`	Margin-right in rem.
`mt`	`number`	`0`	Margin-top in rem.
`mb`	`number`	`0`	Margin-bottom in rem.
`highlight_range_start_percent`	`number`	`0`	Optional highlight range start in percent (0-100).
`highlight_range_end_percent`	`number`	`0`	Optional highlight range end in percent (0-100).