Slider

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

Example

Source Code

Installation

"use client";

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

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

export default SliderExample;

Props

Slider

Range

Thumb

Track

Prop

Type

Default

Additional info

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. Find its full list of properties by visiting their docs.

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 Installation Quick start Pricing

CompanyBlog LinkedIn X / Twitter Github

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