webflow svelte components logoWFS

Slider

A form field that allows users to select a single value from within a given range.

API Reference

Usage

<script lang="ts">
  import { Slider } from '$lib/components/slider';
 
  let value = [50];
</script>
<Slider bind:value />

Properties

The Slider component extends the Bits UI <Slider> component. Find the full list of available properties in the official Bits UI documentation.

Examples

Range

Use an array with two values to create a range slider.

Min max

Use the min and max properties to set the minimum and maximum values.

Step

Use the step property to set the step size.

Disabled

Use the disabled property to disable the Slider component.

On this page