Slider

A control that allows the user to select a value from a range.

Installation

Usage

Example

Source Code

"use client";

import React from "react";
import { Slider } from "@/ui/components/Slider";

function SliderExample() {
  return (
    <Slider
      value={[]}
      onValueChange={(value: number[]) => {}}
      onValueCommit={(value: number[]) => {}}
    />
  );
}

export default SliderExample;

Props

Slider Props

Range Props

Thumb Props

Track Props

Prop

Type

Default value

Notes

value

number[]

—

The value of the slider.

onValueChange

(value: number[]) => void

—

Handler called when the value changes.

onValueCommit

(value: number[]) => void

—

Handler called when the value changes at the end of an interaction.

This is a Radix Slider Root component.

Examples

Basics

Use defaultValue to set the initial value of the slider (between 0 and 100).


View code

Controlled

Use value and onValueChange props to control the checked state.


View code

Use onValueCommit if you want to update the value only when the user has finished dragging the slider.


View code

Min and max

Use min and max props to set the minimum and maximum values of the slider.


View code

Defining step size

Use step prop to set the step size of the slider.


View code

Adding an input


View code

Built in Subframe

ProductComponents Theme Templates Docs Pricing

CompanyBlog LinkedIn X / Twitter Github

ResourcesSlack community Help center For agencies For design systems Subframe vs Figma