Slider

The RhSlider is a visual input component that reflects the current state status in its appearance.

Usage

Once installed, you can import the RhSlider component into your React application:

copy

import {RhSlider} from "@rhythm-ui/react"

Then, you can use the RhSlider component in your JSX code:

copy

<RhSlider min={0} max={100} value={[50]} />

Slider Props

Name	Type	Default	Description
value	number \| number[]	[50]	Provide default value of slider
min	number	0	Provide min value of slider
max	number	100	Provide the max value of slider
marks	boolean \| marksObject[]	false	Use this to show marks on the slider for intervals and to customize it
stepSize	number	1	Provide interval size of slider
dotSize	"sm" \| "lg" \| "md"	md	Provide size of slider thumb
disabled	boolean	false	Use this to disable the slider
fixed	boolean	false	In range slider, use this to get fixed range slider
minRange	number		In range slider, use this to a slider with a minimum range
maxRange	number		In range slider, use this to a slider with a maximum range

Disabled

The disabled prop is set to true, the slider will become inactive and the user will not be able to move the slider thumb or select a new value.

copy

<RhSlider min={0} max={100} value={[50]} disabled={true} />

Dot Size

The dotSize of the dot is displayed on the slider thumb. This prop can be used to adjust the visual size of the thumb relative to the rest of the slider.

copy

<RhSlider min={0} max={100} value={[50]} dotSize="lg" />

Persist label

To make the label always visible use persistLabel prop.

copy

<RhSlider min={0} max={100} value={[50]} persistLabel={true} />

Interval

The stepSize prop would likely involve passing a numerical value to the component, indicating the desired size of each step on the slider.

copy

<RhSlider min={0} max={100} value={[50]} stepSize={10} />

Marks

The array of values that can be used to mark specific points on the slider. These marks can be used to indicate important values or milestones along the slider range.

copy

<RhSlider min={0} max={100} value={[50]} stepSize={10} marks={true} />

Custom Marks

To have custom marks, pass the relevant data as an array.

copy

<RhSlider
  min={0}
  max={100}
  value={[50]}
  stepSize={10}
  marks={[
    {
      value: 0,
      label: "0°C",
    },
    {
      value: 20,
      label: "20°C",
    },
    {
      value: 37,
      label: "37°C",
    },
    {
      value: 100,
      label: "100°C",
    },
  ]}
/>

Multi Range

To have more than one slider, pass more than 1 value in value array prop.

copy

<RhSlider min={0} max={100} value={[30, 40]} />

Enable Cross

The enableCross prop, If set to true in a range slider, the thumbs can cross over each other.

copy

<RhSlider min={0} max={100} value={[30, 40]} stepSize={10} enableCross={true} />

Fixed Distance

The fixed prop, If set to true, the slider thumb will snap to the nearest mark.

copy

<RhSlider min={0} max={100} value={[30, 40]} stepSize={10} fixed={true} />

Min Range

Set minRange difference between range slider value

copy

<RhSlider
  min={0}
  max={100}
  value={[30, 50]}
  stepSize={10}
  fixed={true}
  minRange={20}
/>

Max Range

Set maxRange difference between range slider value

copy

<RhSlider
  min={0}
  max={100}
  value={[20, 30]}
  stepSize={10}
  fixed={true}
  maxRange={50}
/>