Slider

A component that allows users to select a value from a range by dragging a thumb.

<script setup lang="ts">
import { ref } from 'vue'
import { Slider } from '@destyler-ui/vue'

const sliderValue = ref([-20, 20])
</script>
<template>
  <Slider.Root :min="-50" :max="50" v-model="sliderValue">
    <Slider.Label>Quantity:</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb v-for="(_, index) in sliderValue" :key="index" :index="index">
        <Slider.DraggingIndicator />
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
    <Slider.MarkerGroup>
      <Slider.Marker :value="-30">*</Slider.Marker>
      <Slider.Marker :value="0">*</Slider.Marker>
      <Slider.Marker :value="30">*</Slider.Marker>
    </Slider.MarkerGroup>
  </Slider.Root>
</template>

import { useState } from 'react'
import { Slider } from '@destyler-ui/react'

export function Basic() {
  const [sliderValue, setSliderValue] = useState([-20, 20])

  return (
    <Slider.Root
      min={-50}
      max={50}
      value={sliderValue}
      onValueChange={({ value }) => setSliderValue(value)}
    >
      <Slider.Label>Slider Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        {sliderValue.map((_, index) => (
          <Slider.Thumb key={index} index={index}>
            <Slider.DraggingIndicator />
            <Slider.HiddenInput />
          </Slider.Thumb>
        ))}
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker value={-30}>*</Slider.Marker>
        <Slider.Marker value={0}>*</Slider.Marker>
        <Slider.Marker value={30}>*</Slider.Marker>
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function Basic() {
  return (
    <Slider.Root>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

<script module lang="ts">
  import type { SliderRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends SliderRootProps {}
</script>

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let { value = $bindable([-20, 20]), min = -50, max = 50, ...props }: BasicProps = $props()
</script>

<Slider.Root {min} {max} bind:value {...props}>
  <Slider.Label>Slider Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    {#each value as _, index (index)}
      <Slider.Thumb {index}>
        <Slider.DraggingIndicator />
        <Slider.HiddenInput />
      </Slider.Thumb>
    {/each}
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker value={-30}>*</Slider.Marker>
    <Slider.Marker value={0}>*</Slider.Marker>
    <Slider.Marker value={30}>*</Slider.Marker>
  </Slider.MarkerGroup>
</Slider.Root>

Anatomy

<script setup lang="ts">
import { Slider } from '@destyler-ui/vue'
</script>

<template>
  <Slider.Root>
    <Slider.Label />
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb />
    </Slider.Control>
    <Slider.MarkerGroup>
      <Slider.Marker />
    </Slider.MarkerGroup>
    <Slider.HiddenInput />
  </Slider.Root>
</template>

import { Slider } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Slider.Root>
      <Slider.Label />
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb />
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker />
      </Slider.MarkerGroup>
      <Slider.HiddenInput />
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Slider.Root>
      <Slider.Label />
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker value={50} />
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let value = $state([-20, 20])
</script>

<Slider.Root min={-50} max={50} bind:value>
  <Slider.Label>Range</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    {#each value as _, index (index)}
      <Slider.Thumb {index}>
        <Slider.DraggingIndicator />
        <Slider.HiddenInput />
      </Slider.Thumb>
    {/each}
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker value={-30}>-30</Slider.Marker>
    <Slider.Marker value={0}>0</Slider.Marker>
    <Slider.Marker value={30}>30</Slider.Marker>
  </Slider.MarkerGroup>
</Slider.Root>

Examples

Basic

<script setup lang="ts">
import { ref } from 'vue'
import { Slider } from '@destyler-ui/vue'

const sliderValue = ref([-20, 20])
</script>
<template>
  <Slider.Root :min="-50" :max="50" v-model="sliderValue">
    <Slider.Label>Quantity:</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb v-for="(_, index) in sliderValue" :key="index" :index="index">
        <Slider.DraggingIndicator />
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
    <Slider.MarkerGroup>
      <Slider.Marker :value="-30">*</Slider.Marker>
      <Slider.Marker :value="0">*</Slider.Marker>
      <Slider.Marker :value="30">*</Slider.Marker>
    </Slider.MarkerGroup>
  </Slider.Root>
</template>

import { useState } from 'react'
import { Slider } from '@destyler-ui/react'

export function Basic() {
  const [sliderValue, setSliderValue] = useState([-20, 20])

  return (
    <Slider.Root
      min={-50}
      max={50}
      value={sliderValue}
      onValueChange={({ value }) => setSliderValue(value)}
    >
      <Slider.Label>Slider Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        {sliderValue.map((_, index) => (
          <Slider.Thumb key={index} index={index}>
            <Slider.DraggingIndicator />
            <Slider.HiddenInput />
          </Slider.Thumb>
        ))}
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker value={-30}>*</Slider.Marker>
        <Slider.Marker value={0}>*</Slider.Marker>
        <Slider.Marker value={30}>*</Slider.Marker>
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function Basic() {
  return (
    <Slider.Root>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

<script module lang="ts">
  import type { SliderRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends SliderRootProps {}
</script>

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let { value = $bindable([-20, 20]), min = -50, max = 50, ...props }: BasicProps = $props()
</script>

<Slider.Root {min} {max} bind:value {...props}>
  <Slider.Label>Slider Label</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    {#each value as _, index (index)}
      <Slider.Thumb {index}>
        <Slider.DraggingIndicator />
        <Slider.HiddenInput />
      </Slider.Thumb>
    {/each}
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker value={-30}>*</Slider.Marker>
    <Slider.Marker value={0}>*</Slider.Marker>
    <Slider.Marker value={30}>*</Slider.Marker>
  </Slider.MarkerGroup>
</Slider.Root>

Initial Value

Set the initial value for the slider.

<script setup lang="ts">
import { Slider } from '@destyler-ui/vue'
</script>

<template>
  <Slider.Root :model-value="[42]">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
    <Slider.MarkerGroup>
      <Slider.Marker :value="0">*</Slider.Marker>
      <Slider.Marker :value="30">*</Slider.Marker>
      <Slider.Marker :value="60">*</Slider.Marker>
    </Slider.MarkerGroup>
  </Slider.Root>
</template>

import { Slider } from '@destyler-ui/react'

export function InitialValue() {
  return (
    <Slider.Root value={[42]}>
      <Slider.Label>Slider with Initial Value</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker value={0}>0</Slider.Marker>
        <Slider.Marker value={30}>30</Slider.Marker>
        <Slider.Marker value={60}>60</Slider.Marker>
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function InitialValue() {
  return (
    <Slider.Root value={[42]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker value={0}>*</Slider.Marker>
        <Slider.Marker value={30}>*</Slider.Marker>
        <Slider.Marker value={60}>*</Slider.Marker>
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let value = $state([42])
</script>

<Slider.Root bind:value>
  <Slider.Label>Slider with Initial Value</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track><Slider.Range /></Slider.Track>
    <Slider.Thumb index={0}><Slider.HiddenInput /></Slider.Thumb>
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker value={0}>0</Slider.Marker>
    <Slider.Marker value={30}>30</Slider.Marker>
    <Slider.Marker value={60}>60</Slider.Marker>
  </Slider.MarkerGroup>
</Slider.Root>

Min/Max

Configure minimum and maximum values.

<script setup lang="ts">
import { Slider } from '@destyler-ui/vue'
</script>

<template>
  <Slider.Root :min="-10" :max="10">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

import { useState } from 'react'
import { Slider } from '@destyler-ui/react'

export function MinMax() {
  const [value, setValue] = useState([0])

  return (
    <Slider.Root
      min={-10}
      max={10}
      value={value}
      onValueChange={({ value }) => setValue(value)}
    >
      <Slider.Label>Min/Max (-10 to 10)</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function MinMax() {
  return (
    <Slider.Root min={-10} max={10}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let value = $state([0])
</script>

<Slider.Root min={-10} max={10} bind:value>
  <Slider.Label>Min/Max (-10 to 10)</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track><Slider.Range /></Slider.Track>
    <Slider.Thumb index={0}><Slider.HiddenInput /></Slider.Thumb>
  </Slider.Control>
</Slider.Root>

Step

Set the step increment for the slider.

<script setup lang="ts">
import { Slider } from '@destyler-ui/vue'
</script>

<template>
  <Slider.Root :step="0.01" :min="5" :max="10">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

import { useState } from 'react'
import { Slider } from '@destyler-ui/react'

export function Step() {
  const [value, setValue] = useState([7])

  return (
    <Slider.Root
      min={5}
      max={10}
      step={0.01}
      value={value}
      onValueChange={({ value }) => setValue(value)}
    >
      <Slider.Label>Step (0.01)</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function Step() {
  return (
    <Slider.Root step={0.01} min={5} max={10}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let value = $state([7])
</script>

<Slider.Root min={5} max={10} step={0.01} bind:value>
  <Slider.Label>Step (0.01)</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track><Slider.Range /></Slider.Track>
    <Slider.Thumb index={0}><Slider.HiddenInput /></Slider.Thumb>
  </Slider.Control>
</Slider.Root>

Range

Use the slider for range selection with two thumbs.

<script setup lang="ts">
import { Slider } from '@destyler-ui/vue'
</script>

<template>
  <Slider.Root :defaultValue="[10, 20]">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <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.Root>
</template>

import { useState } from 'react'
import { Slider } from '@destyler-ui/react'

export function Range() {
  const [values, setValues] = useState([10, 20])

  return (
    <Slider.Root
      defaultValue={[10, 20]}
      value={values}
      onValueChange={({ value }) => setValues(value)}
    >
      <Slider.Label>Range Slider</Slider.Label>
      <Slider.ValueText />
      <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.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function Range() {
  return (
    <Slider.Root value={[5, 10]}>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <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.Root>
  )
}

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let value = $state([10, 20])
</script>

<Slider.Root bind:value>
  <Slider.Label>Range Slider</Slider.Label>
  <Slider.ValueText />
  <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.Root>

Center Origin

Display the range from the center.

<script setup lang="ts">
import { Slider } from '@destyler-ui/vue'
</script>

<template>
  <Slider.Root origin="center">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

import { useState } from 'react'
import { Slider } from '@destyler-ui/react'

export function CenterOrigin() {
  const [value, setValue] = useState([0])

  return (
    <Slider.Root
      origin="center"
      value={value}
      onValueChange={({ value }) => setValue(value)}
    >
      <Slider.Label>Center Origin</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function CenterOrigin() {
  return (
    <Slider.Root origin="center">
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let value = $state([0])
</script>

<Slider.Root origin="center" bind:value>
  <Slider.Label>Center Origin</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track><Slider.Range /></Slider.Track>
    <Slider.Thumb index={0}><Slider.HiddenInput /></Slider.Thumb>
  </Slider.Control>
</Slider.Root>

Vertical

Display the slider in a vertical orientation.

<script setup lang="ts">
import { Slider } from '@destyler-ui/vue'
</script>

<template>
  <Slider.Root orientation="vertical">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

import { useState } from 'react'
import { Slider } from '@destyler-ui/react'

export function Vertical() {
  const [value, setValue] = useState([50])

  return (
    <Slider.Root
      orientation="vertical"
      value={value}
      onValueChange={({ value }) => setValue(value)}
      style={{ height: '200px' }}
    >
      <Slider.Label>Vertical Slider</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function Vertical() {
  return (
    <Slider.Root orientation="vertical">
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let value = $state([50])
</script>

<Slider.Root orientation="vertical" style="height: 200px" bind:value>
  <Slider.Label>Vertical Slider</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track><Slider.Range /></Slider.Track>
    <Slider.Thumb index={0}><Slider.HiddenInput /></Slider.Thumb>
  </Slider.Control>
</Slider.Root>

With Marks

Add visual markers along the slider track.

<script setup lang="ts">
import { Slider } from '@destyler-ui/vue'
</script>

<template>
  <Slider.Root>
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
    <Slider.MarkerGroup>
      <Slider.Marker :value="0">0</Slider.Marker>
      <Slider.Marker :value="25">*</Slider.Marker>
      <Slider.Marker :value="50">50</Slider.Marker>
      <Slider.Marker :value="75">*</Slider.Marker>
    </Slider.MarkerGroup>
  </Slider.Root>
</template>

import { useState } from 'react'
import { Slider } from '@destyler-ui/react'

export function WithMarks() {
  const [value, setValue] = useState([50])

  return (
    <Slider.Root
      value={value}
      onValueChange={({ value }) => setValue(value)}
    >
      <Slider.Label>With Marks</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker value={0}>0</Slider.Marker>
        <Slider.Marker value={25}>*</Slider.Marker>
        <Slider.Marker value={50}>50</Slider.Marker>
        <Slider.Marker value={75}>*</Slider.Marker>
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function WithMarks() {
  return (
    <Slider.Root>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
      <Slider.MarkerGroup>
        <Slider.Marker value={0}>0</Slider.Marker>
        <Slider.Marker value={25}>*</Slider.Marker>
        <Slider.Marker value={50}>50</Slider.Marker>
        <Slider.Marker value={75}>*</Slider.Marker>
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let value = $state([50])
</script>

<Slider.Root bind:value>
  <Slider.Label>With Marks</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track><Slider.Range /></Slider.Track>
    <Slider.Thumb index={0}><Slider.HiddenInput /></Slider.Thumb>
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker value={0}>0</Slider.Marker>
    <Slider.Marker value={25}>*</Slider.Marker>
    <Slider.Marker value={50}>50</Slider.Marker>
    <Slider.Marker value={75}>*</Slider.Marker>
  </Slider.MarkerGroup>
</Slider.Root>

Dragging Indicator

Show an indicator while dragging.

<script setup lang="ts">
import { Slider } from '@destyler-ui/vue'
</script>

<template>
  <Slider.Root>
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.DraggingIndicator />
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

import { useState } from 'react'
import { Slider } from '@destyler-ui/react'

export function DraggingIndicator() {
  const [value, setValue] = useState([50])

  return (
    <Slider.Root
      value={value}
      onValueChange={({ value }) => setValue(value)}
    >
      <Slider.Label>Dragging Indicator</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.DraggingIndicator />
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function DraggingIndicator() {
  return (
    <Slider.Root>
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.DraggingIndicator />
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let value = $state([50])
</script>

<Slider.Root bind:value>
  <Slider.Label>Dragging Indicator</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track><Slider.Range /></Slider.Track>
    <Slider.Thumb index={0}>
      <Slider.DraggingIndicator />
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
</Slider.Root>

On Event

Listen for value change events.

<script setup lang="ts">
import { Slider } from '@destyler-ui/vue'
</script>

<template>
  <Slider.Root
    @value-change="(details) => console.log(details.value)"
    @value-change-end="(details) => console.log(details.value)"
  >
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
</template>

import { useState } from 'react'
import { Slider } from '@destyler-ui/react'

export function OnEvent() {
  const [value, setValue] = useState([50])

  return (
    <Slider.Root
      value={value}
      onValueChange={({ value }) => {
        setValue(value)
        // eslint-disable-next-line no-console
        console.log('Value changed:', value)
      }}
      onValueChangeEnd={({ value }) => {
        // eslint-disable-next-line no-console
        console.log('Value change ended:', value)
      }}
    >
      <Slider.Label>Event Handling</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

import { Slider } from '@destyler-ui/solid/slider'

export function OnEvent() {
  return (
    <Slider.Root
      onValueChange={details => console.warn(details.value)}
      onValueChangeEnd={details => console.warn(details.value)}
    >
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText />
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}

<script module lang="ts">
  import type { SliderRootProps } from '@destyler-ui/svelte'

  export interface OnEventProps {
    onValueChange?: SliderRootProps['onValueChange']
    onValueChangeEnd?: SliderRootProps['onValueChangeEnd']
  }
</script>

<script lang="ts">
  import { Slider } from '@destyler-ui/svelte'

  let value = $state([50])
  const {
    onValueChange = details => console.log('Value changed:', details.value),
    onValueChangeEnd = details => console.log('Value change ended:', details.value),
  }: OnEventProps = $props()
</script>

<Slider.Root bind:value {onValueChange} {onValueChangeEnd}>
  <Slider.Label>Event Handling</Slider.Label>
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track><Slider.Range /></Slider.Track>
    <Slider.Thumb index={0}><Slider.HiddenInput /></Slider.Thumb>
  </Slider.Control>
</Slider.Root>

Root Provider

<script setup lang="ts">
import { Slider, useSlider } from '@destyler-ui/vue'

const slider = useSlider()
</script>

<template>
  <button @click="slider.focus()">Focus</button>

  <Slider.RootProvider :value="slider">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0">
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.RootProvider>
</template>

import { useRef, useState } from 'react'
import { Slider, useSlider } from '@destyler-ui/react'

export function RootProviderExample() {
  const [value, setValue] = useState([50])
  const slider = useSlider({
    value,
    onValueChange: ({ value }) => setValue(value),
  })
  const buttonRef = useRef<HTMLButtonElement>(null)

  return (
    <div>
      <button
        ref={buttonRef}
        onClick={() => slider.focus()}
        style={{ marginBottom: '16px' }}
      >
        Focus Slider
      </button>
      <Slider.RootProvider value={slider}>
        <Slider.Label>Root Provider Example</Slider.Label>
        <Slider.ValueText />
        <Slider.Control>
          <Slider.Track>
            <Slider.Range />
          </Slider.Track>
          <Slider.Thumb index={0}>
            <Slider.HiddenInput />
          </Slider.Thumb>
        </Slider.Control>
      </Slider.RootProvider>
    </div>
  )
}

import { Slider, useSlider } from '@destyler-ui/solid/slider'

export function RootProvider() {
  const slider = useSlider()

  return (
    <>
      <button onClick={() => slider().focus()}>Focus</button>

      <Slider.RootProvider value={slider}>
        <Slider.Label>Label</Slider.Label>
        <Slider.ValueText />
        <Slider.Control>
          <Slider.Track>
            <Slider.Range />
          </Slider.Track>
          <Slider.Thumb index={0}>
            <Slider.HiddenInput />
          </Slider.Thumb>
        </Slider.Control>
      </Slider.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Slider, useSlider } from '@destyler-ui/svelte'

  let value = $state([50])
  const id = $props.id()
  const slider = useSlider(() => ({
    id,
    value,
    onValueChange(details) {
      value = details.value
    },
  }))
</script>

<div>
  <button type="button" onclick={() => slider().focus()} style="margin-bottom: 16px;">Focus Slider</button>
  <Slider.RootProvider value={slider}>
    <Slider.Label>Root Provider Example</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track><Slider.Range /></Slider.Track>
      <Slider.Thumb index={0}><Slider.HiddenInput /></Slider.Thumb>
    </Slider.Control>
  </Slider.RootProvider>
</div>

API Reference

Root

Prop	Default	Type
`aria-label`	—	`string[]` The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`	—	`string[]` The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`	—	`number[]` The initial value of the slider when it is first rendered. Use when you do not need to control the state of the slider.
`disabled`	—	`false \| true` Whether the slider is disabled
`form`	—	`string` The associate form of the underlying input element.
`getAriaValueText`	—	`(details: slider.ValueTextDetails) => string` Function that returns a human readable value for the slider thumb
`id`	—	`string` The unique identifier of the machine.
`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; }>` The ids of the elements in the range slider. Useful for composition.
`invalid`	—	`false \| true` Whether the slider is invalid
`max`	`100`	`number` The maximum value of the slider
`min`	`0`	`number` The minimum value of the slider
`minStepsBetweenThumbs`	`0`	`number` The minimum permitted steps between multiple thumbs.
`modelValue`	—	`number[]`
`name`	—	`string` The name associated with each slider thumb (when used in a form)
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the slider
`origin`	`"start"`	`"start" \| "center"` The origin of the slider range - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative)
`readOnly`	—	`false \| true` Whether the slider is read-only
`step`	`1`	`number` The step value of the slider
`thumbAlignment`	`"contain"`	`"center" \| "contain"` 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; }` The slider thumbs dimensions

Emit	Event
`focusChange`	`[details: FocusChangeDetails]` Function invoked when the slider's focused index changes
`update:modelValue`	`[value: number[]]` The callback fired when the model value changes.
`valueChange`	`[details: ValueChangeDetails]` Function invoked when the value of the slider changes
`valueChangeEnd`	`[details: ValueChangeDetails]` Function invoked when the slider value change is done

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

DraggingIndicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Marker

Prop	Default	Type
`value*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

MarkerGroup

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Range

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Thumb

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`name`	—	`string`

Track

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`aria-label`	—	`string[]` The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`	—	`string[]` The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`	—	`number[]` The initial value of the slider when it is first rendered. Use when you do not need to control the state of the slider picker.
`disabled`	—	`false \| true` Whether the slider is disabled
`form`	—	`string` The associate form of the underlying input element.
`getAriaValueText`	—	`(details: slider.ValueTextDetails) => string` Function that returns a human readable value for the slider thumb
`id`	—	`string` The unique identifier of the machine.
`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; }>` The ids of the elements in the range slider. Useful for composition.
`invalid`	—	`false \| true` Whether the slider is invalid
`max`	`100`	`number` The maximum value of the slider
`min`	`0`	`number` The minimum value of the slider
`minStepsBetweenThumbs`	`0`	`number` The minimum permitted steps between multiple thumbs.
`name`	—	`string` The name associated with each slider thumb (when used in a form)
`onFocusChange`	—	`(details: slider.FocusChangeDetails) => void` Function invoked when the slider's focused index changes
`onValueChange`	—	`(details: slider.ValueChangeDetails) => void` Function invoked when the value of the slider changes
`onValueChangeEnd`	—	`(details: slider.ValueChangeDetails) => void` Function invoked when the slider value change is done
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the slider
`origin`	`"start"`	`"center" \| "start"` The origin of the slider range - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative)
`readOnly`	—	`false \| true` Whether the slider is read-only
`step`	`1`	`number` The step value of the slider
`thumbAlignment`	`"contain"`	`"center" \| "contain"` 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`	—	`null \| { width: number; height: number; }` The slider thumbs dimensions
`value`	—	`number[]` The value of the range slider

Context

Prop	Default	Type
`children*`	—	`(context: UseSliderContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

DraggingIndicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Marker

Prop	Default	Type
`value*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

MarkerGroup

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Range

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseSliderReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Thumb

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`name`	—	`string`

Track

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`aria-label`	—	`string[]` The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`	—	`string[]` The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`asChild`	—	`(props: (userProps?: solid_js192.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`	—	`number[]` The initial value of the slider when it is first rendered. Use when you do not need to control the state of the slider picker.
`disabled`	—	`false \| true` Whether the slider is disabled
`form`	—	`string` The associate form of the underlying input element.
`getAriaValueText`	—	`(details: slider.ValueTextDetails) => string` Function that returns a human readable value for the slider thumb
`id`	—	`string` The unique identifier of the machine.
`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; }>` The ids of the elements in the range slider. Useful for composition.
`invalid`	—	`false \| true` Whether the slider is invalid
`max`	`100`	`number` The maximum value of the slider
`min`	`0`	`number` The minimum value of the slider
`minStepsBetweenThumbs`	`0`	`number` The minimum permitted steps between multiple thumbs.
`name`	—	`string` The name associated with each slider thumb (when used in a form)
`onFocusChange`	—	`(details: FocusChangeDetails) => void` Function invoked when the slider's focused index changes
`onValueChange`	—	`(details: ValueChangeDetails) => void` Function invoked when the value of the slider changes
`onValueChangeEnd`	—	`(details: ValueChangeDetails) => void` Function invoked when the slider value change is done
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the slider
`origin`	`"start"`	`"start" \| "center"` The origin of the slider range - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative)
`readOnly`	—	`false \| true` Whether the slider is read-only
`step`	`1`	`number` The step value of the slider
`thumbAlignment`	`"contain"`	`"center" \| "contain"` 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`	—	`null \| { width: number; height: number; }` The slider thumbs dimensions
`value`	—	`number[]` The value of the range slider

Context

Prop	Default	Type
`children*`	—	`(context: UseSliderContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js192.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

DraggingIndicator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js192.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js192.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js192.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Marker

Prop	Default	Type
`value*`	—	`number`
`asChild`	—	`(props: (userProps?: solid_js192.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

MarkerGroup

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js192.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Range

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js192.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseSliderReturn`
`asChild`	—	`(props: (userProps?: solid_js192.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Thumb

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`(props: (userProps?: solid_js192.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`name`	—	`string`

Track

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js192.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js192.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`aria-label`	—	`string[]` The aria-label of each slider thumb. Useful for providing an accessible name to the slider
`aria-labelledby`	—	`string[]` The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`defaultValue`	—	`number[]`
`disabled`	—	`false \| true` Whether the slider is disabled
`form`	—	`string` The associate form of the underlying input element.
`getAriaValueText`	—	`((details: ValueTextDetails) => string) \| undefined` Function that returns a human readable value for the slider thumb
`id`	—	`string`
`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; }>` The ids of the elements in the range slider. Useful for composition.
`invalid`	—	`false \| true` Whether the slider is invalid
`max`	`100`	`number` The maximum value of the slider
`min`	`0`	`number` The minimum value of the slider
`minStepsBetweenThumbs`	`0`	`number` The minimum permitted steps between multiple thumbs.
`name`	—	`string` The name associated with each slider thumb (when used in a form)
`onFocusChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").SliderFocusChangeDetails) => void` Function invoked when the slider's focused index changes
`onValueChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").SliderValueChangeDetails) => void` Function invoked when the value of the slider changes
`onValueChangeEnd`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").SliderValueChangeDetails) => void` Function invoked when the slider value change is done
`orientation`	`"horizontal"`	`"horizontal" \| "vertical"` The orientation of the slider
`origin`	`"start"`	`"start" \| "center"` The origin of the slider range - "start": Useful when the value represents an absolute value - "center": Useful when the value represents an offset (relative)
`readOnly`	—	`false \| true` Whether the slider is read-only
`step`	`1`	`number` The step value of the slider
`thumbAlignment`	`"contain"`	`"center" \| "contain"` 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`	—	`null \| { width: number; height: number; }` The slider thumbs dimensions
`value`	—	`number[]` The value of the range slider

Context

Prop	Default	Type
`render`	—	`Snippet<[UseSliderContext]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

DraggingIndicator

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

HiddenInput

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

Marker

Prop	Default	Type
`value*`	—	`number`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`

MarkerGroup

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Range

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseSliderReturn`

Thumb

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`name`	—	`string`

Track

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

ValueText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`