Slider

Allows users to select a value or range from a given range.

How to Import

Add this import to your component file

app/page.tsx

1import { Slider } from "@/components/lightswind/slider"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

defaultValue	number[]	-	The default value of the slider	Optional
value	number[]	-	The controlled value of the slider	Optional
min	number	0	The minimum value of the slider	Optional
max	number	100	The maximum value of the slider	Optional
step	number	1	The step value of the slider	Optional
onValueChange	function	-	Callback function called when the value changes	Optional
disabled	boolean	false	When true, prevents the user from interacting with the slider	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1<Slider defaultValue={[33]} max={100} step={1} />

Variants

Different visual and behavioral variants of the component

Range Variant

Slider that allows selecting a range with two handles

Preview not available for this example.

Previousselect

Nextrange-slider

A product byＭＵＨＩＬＡＮ and Team❤️.

Slider

Allows users to select a value or range from a given range.

...

How to Import

Add this import to your component file

app/page.tsx

1import { Slider } from "@/components/lightswind/slider"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

defaultValue	number[]	-	The default value of the slider	Optional
value	number[]	-	The controlled value of the slider	Optional
min	number	0	The minimum value of the slider	Optional
max	number	100	The maximum value of the slider	Optional
step	number	1	The step value of the slider	Optional
onValueChange	function	-	Callback function called when the value changes	Optional
disabled	boolean	false	When true, prevents the user from interacting with the slider	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1<Slider defaultValue={[33]} max={100} step={1} />

Variants

Different visual and behavioral variants of the component

Range Variant

Slider that allows selecting a range with two handles

Preview not available for this example.

Previousselect

Nextrange-slider

A product byＭＵＨＩＬＡＮ and Team❤️.

Slider

How to Import

Props

Basic Usage

Variants

Range Variant

On This Page

Contribute

Slider

How to Import

Props

Basic Usage

Variants

Range Variant

On This Page

Contribute

React Slider Component - Lightswind UI

Key Details of React Slider

Slider

How to Import

Props

Basic Usage

Variants

Range Variant

On This Page

Contribute

Slider

How to Import

Props

Basic Usage

Variants

Range Variant

On This Page

Contribute