Slider - Skeleton

Label

<script lang="ts">
  import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<Slider defaultValue={[50]}>
  <Slider.Label>Label</Slider.Label>
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker value={25} />
    <Slider.Marker value={50} />
    <Slider.Marker value={75} />
  </Slider.MarkerGroup>
</Slider>

Color

<script lang="ts">
  import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="space-y-8 w-full">
  <Slider defaultValue={[50]}>
    <Slider.Control>
      <Slider.Track>
        <Slider.Range class="bg-primary-500" />
      </Slider.Track>
      <Slider.Thumb index={0}>
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider>

  <Slider defaultValue={[50]}>
    <Slider.Control>
      <Slider.Track>
        <Slider.Range class="bg-secondary-500" />
      </Slider.Track>
      <Slider.Thumb index={0}>
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider>

  <Slider defaultValue={[50]}>
    <Slider.Control>
      <Slider.Track>
        <Slider.Range class="bg-tertiary-500" />
      </Slider.Track>
      <Slider.Thumb index={0}>
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider>
</div>

Disabled

<script lang="ts">
  import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<Slider defaultValue={[50]} disabled>
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider>

Readonly

<script lang="ts">
  import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<Slider defaultValue={[50]} readOnly>
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider>

Multiple Thumbs

<script lang="ts">
  import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<Slider defaultValue={[25, 75]}>
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
    <Slider.Thumb index={1}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider>

Direction

Label

<script lang="ts">
  import { Slider } from '@skeletonlabs/skeleton-svelte';
</script>

<Slider defaultValue={[50]} dir="rtl">
  <Slider.Label>Label</Slider.Label>
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker value={25} />
    <Slider.Marker value={50} />
    <Slider.Marker value={75} />
  </Slider.MarkerGroup>
</Slider>

API Reference

Root

flex flex-col gap-2 w-full

Property	Default	Type
`ids`	-	Partial<{ root: string; thumb: (index: number) => string; hiddenInput: (index: number) => string; control: string; track: string; range: string; label: string; valueText: string; marker: (index: number) => string; }> \| undefined The ids of the elements in the slider. Useful for composition.
`aria-label`	-	string[] \| undefined The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`	-	string[] \| undefined The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`name`	-	string \| undefined The name associated with each slider thumb (when used in a form)
`form`	-	string \| undefined The associate form of the underlying input element.
`value`	-	number[] \| undefined The controlled value of the slider
`defaultValue`	-	number[] \| undefined The initial value of the slider when rendered. Use when you don't need to control the value of the slider.
`disabled`	-	boolean \| undefined Whether the slider is disabled
`readOnly`	-	boolean \| undefined Whether the slider is read-only
`invalid`	-	boolean \| undefined Whether the slider is invalid
`onValueChange`	-	((details: ValueChangeDetails) => void) \| undefined Function invoked when the value of the slider changes
`onValueChangeEnd`	-	((details: ValueChangeDetails) => void) \| undefined Function invoked when the slider value change is done
`onFocusChange`	-	((details: FocusChangeDetails) => void) \| undefined Function invoked when the slider's focused index changes
`getAriaValueText`	-	((details: ValueTextDetails) => string) \| undefined Function that returns a human readable value for the slider thumb
`min`	0	number \| undefined The minimum value of the slider
`max`	100	number \| undefined The maximum value of the slider
`step`	1	number \| undefined The step value of the slider
`minStepsBetweenThumbs`	0	number \| undefined The minimum permitted steps between multiple thumbs. `minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs. - `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10` - `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20`
`orientation`	"horizontal"	"vertical" \| "horizontal" \| undefined The orientation of the slider
`origin`	"start"	"start" \| "center" \| "end" \| undefined The origin of the slider range. The track is filled from the origin to the thumb for single values. - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative) - "end": Useful when the value represents an offset from the end
`thumbAlignment`	"contain"	"center" \| "contain" \| undefined The alignment of the slider thumb relative to the track - `center`: the thumb will extend beyond the bounds of the slider track. - `contain`: the thumb will be contained within the bounds of the track.
`thumbSize`	-	{ width: number; height: number; } \| undefined The slider thumbs dimensions
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	-	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootProvider

Property	Default	Type
`value`	-	() => SliderApi<PropTypes>
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

RootContext

Property	Default	Type
`children`	-	Snippet<[() => SliderApi<PropTypes>]>

Label

label-text

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

ValueText

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"output">]> \| undefined Render the element yourself

Control

flex items-center data-disabled:opacity-50

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Track

bg-surface-200-800 rounded-base h-2 overflow-hidden flex-1

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Range

bg-surface-950-50 h-full

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Thumb

size-5 bg-surface-50-950 ring-inset ring-2 ring-surface-950-50 rounded-full focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-surface-950-50

Property	Default	Type
`index`	-	number
`name`	-	string \| undefined
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

HiddenInput

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself

MarkerGroup

Property	Default	Type
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Marker

text-xs text-surface-600-400

Property	Default	Type
`value`	-	number
`element`	-	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself