🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Slider

A slider component for selecting values within a range

Installation

The Slider component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Slider component into your React component.

import { Slider } from 'reacui';

Basic Usage

The Slider component allows users to select a value within a specified range.

<Slider
  value={40}
  min={0}
  max={100}
  onChange={(value) => console.log(value)}
/>

Colors

Sliders can be styled with different colors to match your application's theme.

Primary (Default)

Success

Danger

Custom

{/* Primary (Default) */}
<Slider
  value={60}
  min={0}
  max={100}
  color="primary"
/>

{/* Success */}
<Slider
  value={70}
  min={0}
  max={100}
  color="success"
/>

{/* Danger */}
<Slider
  value={30}
  min={0}
  max={100}
  color="danger"
/>

{/* Custom */}
<Slider
  value={50}
  min={0}
  max={100}
  color="purple"
/>

With Label

Add labels and value indicators to provide more context and improve usability.

Volume75%

0%100%

Brightness50%

0%100%

<div className="mb-6">
  <div className="flex justify-between items-center mb-2">
    <label htmlFor="volume-slider" className="text-sm font-medium text-gray-700 dark:text-gray-300">
      Volume
    </label>
    <span className="text-sm text-gray-600 dark:text-gray-400">{value}%</span>
  </div>
  <Slider
    id="volume-slider"
    value={75}
    min={0}
    max={100}
    showLimits
    onChange={(value) => setValue(value)}
  />
</div>

<div>
  <div className="flex justify-between items-center mb-2">
    <label htmlFor="brightness-slider" className="text-sm font-medium text-gray-700 dark:text-gray-300">
      Brightness
    </label>
    <span className="text-sm text-gray-600 dark:text-gray-400">{value}%</span>
  </div>
  <Slider
    id="brightness-slider"
    value={50}
    min={0}
    max={100}
    showLimits
    onChange={(value) => setValue(value)}
  />
</div>

With Markers

Add markers to provide predefined values for the slider.

100

<Slider
  value={60}
  min={0}
  max={100}
  step={25}
  markers={[
    { value: 0, label: '0' },
    { value: 25, label: '25' },
    { value: 50, label: '50' },
    { value: 75, label: '75' },
    { value: 100, label: '100' }
  ]}
  onChange={(value) => console.log(value)}
/>

API Reference

The following props are available for the Slider component.

Prop	Type	Default	Description
value	number	0	The current value of the slider
min	number	0	The minimum value of the slider
max	number	100	The maximum value of the slider
step	number	1	The step increment value
disabled	boolean	false	Whether the slider is disabled
color	string	'primary'	The color of the slider: 'primary', 'success', 'danger', or custom
showLimits	boolean	false	Whether to show min and max labels
markers	array	[]	Array of marker objects with value and label
onChange	function	-	Callback function that is triggered when the slider value changes