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 />;
}

export default SliderExample;

Props

Slider

Range

Thumb

Track

This component has no additional props.

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