Rc Slider

A slider component enables user to pick any value from a range.

Installation

Install the rc-slider package.

npm i rc-slider

Create a range component, components/range-slider.tsx

import React from "react";
import Slider from "rc-slider";
import type { SliderProps } from "rc-slider";
import { cn } from "rizzui";
import "rc-slider/assets/index.css";

const rangeStyles = {
  base: "[&>.rc-slider-rail]:bg-muted [&>.rc-slider-handle]:opacity-100 [&>.rc-slider-handle-dragging]:!shadow-none [&>.rc-slider-handle-dragging]:ring-4",
  size: {
    sm: "[&>.rc-slider-rail]:h-0.5 [&>.rc-slider-track]:h-0.5 [&>.rc-slider-handle]:h-3 [&>.rc-slider-handle]:w-3 [&>.rc-slider-handle]:border-[3px]",
    md: "[&>.rc-slider-rail]:h-1 [&>.rc-slider-track]:h-1 [&>.rc-slider-handle]:h-4 [&>.rc-slider-handle]:w-4 [&>.rc-slider-handle]:border-4 [&>.rc-slider-handle]:-mt-1.5",
    lg: "[&>.rc-slider-rail]:h-2 [&>.rc-slider-track]:h-2 [&>.rc-slider-handle]:h-5 [&>.rc-slider-handle]:w-5 [&>.rc-slider-handle]:border-[5px] [&>.rc-slider-handle]:-mt-1.5",
    xl: "[&>.rc-slider-rail]:h-3 [&>.rc-slider-track]:h-3 [&>.rc-slider-handle]:h-6 [&>.rc-slider-handle]:w-6 [&>.rc-slider-handle]:border-[6px] [&>.rc-slider-handle]:-mt-1.5",
  },
  color: {
    primary:
      "[&>.rc-slider-track]:bg-primary [&>.rc-slider-handle]:border-primary-dark [&>.rc-slider-handle]:hover:border-primary-dark [&>.rc-slider-handle-dragging]:!border-primary-dark [&>.rc-slider-handle-dragging]:ring-primary/40 [&>.rc-slider-step>.rc-slider-dot-active]:border-primary-dark",
    secondary:
      "[&>.rc-slider-track]:bg-secondary [&>.rc-slider-handle]:border-secondary-dark [&>.rc-slider-handle]:hover:border-secondary-dark [&>.rc-slider-handle-dragging]:!border-secondary-dark [&>.rc-slider-handle-dragging]:ring-secondary/40 [&>.rc-slider-step>.rc-slider-dot-active]:border-secondary-dark",
    danger:
      "[&>.rc-slider-track]:bg-red [&>.rc-slider-handle]:border-red-dark [&>.rc-slider-handle]:hover:border-red-dark [&>.rc-slider-handle-dragging]:!border-red-dark [&>.rc-slider-handle-dragging]:ring-red/40 [&>.rc-slider-step>.rc-slider-dot-active]:border-red-dark",
  },
};

export interface RangeSliderProps extends SliderProps {
  size?: keyof typeof rangeStyles.size;
  color?: keyof typeof rangeStyles.color;
}

export default function RangeSlider({
  size = "md",
  color = "primary",
  className,
  ...props
}: RangeSliderProps) {
  return (
    <Slider
      className={cn(
        rangeStyles.base,
        rangeStyles.size[size],
        rangeStyles.color[color],
        className
      )}
      {...props}
    />
  );
}

RangeSlider.displayName = "RangeSlider";

Default

The default style of RangeSlider component.

import { RangeSlider } from "rizzui";

export default function App() {
  return <RangeSlider defaultValue={20} />;
}

Sizes

You can change the size of RangeSlider using size property.

import { RangeSlider } from "rizzui";

export default function App() {
  return (
    <>
      <RangeSlider size="sm" defaultValue={20} />
      <RangeSlider defaultValue={25} />
      <RangeSlider size="lg" defaultValue={30} />
      <RangeSlider size="xl" defaultValue={35} />
    </>
  );
}

Colors

You can change the color of RangeSlider using color property.

import { RangeSlider } from "rizzui";

export default function App() {
  return (
    <>
      <RangeSlider defaultValue={15} />
      <RangeSlider defaultValue={25} color="secondary" />
      <RangeSlider defaultValue={30} color="danger" />
    </>
  );
}

With Range

When range is true, display as dual thumb mode.

import { RangeSlider } from "rizzui";

export default function App() {
  return <RangeSlider defaultValue={[20, 60]} range />;
}

With Marks & Steps

You can set multiple marks and steps using marks & step property.

0200040006000800010000

import { RangeSlider } from "rizzui";

export default function App() {
  return (
    <RangeSlider
      marks={{
        0: "0",
        20: "2000",
        40: "4000",
        60: "6000",
        80: "8000",
        100: "10000",
      }}
      step={20}
      defaultValue={40}
    />
  );
}

With Marks & Steps in Range

Make multiple marks and steps with range using marks, step, & range property.

0200040006000800010000

import { RangeSlider } from "rizzui";

export default function App() {
  return (
    <RangeSlider
      range
      marks={{
        0: "0",
        20: "2000",
        40: "4000",
        60: "6000",
        80: "8000",
        100: "10000",
      }}
      step={20}
      defaultValue={[20, 60]}
    />
  );
}

With Range Counter

Customize your range slider according to your preference.

Min

Max

import React from 'react';
import { RangeSlider, cn } from 'rizzui';

export default function App() {
    const [state, setState] = React.useState({
        min: 200,
        max: 600,
    });

    function handleRangeChange(value: any) {
        setState({
            min: value[0],
            max: value[1],
        });
    }
    function handleMaxChange(max: number) {
        setState({
            ...state,
            max: max || state.min,
        });
    }
    function handleMinChange(min: number) {
        setState({
            ...state,
            min: min || 0,
        });
    }

    return (
        <div>
            <RangeSlider
                range
                min={0}
                max={1000}
                value={[state.min, state.max]}
                onChange={(value: any) => handleRangeChange(value)}
                className={cn('[&>.rc-slider-step]:hidden')}
            />
            <div className="mt-5 grid grid-cols-2 items-center justify-between gap-5 text-sm font-bold">
                <div className="overflow-hidden rounded-lg border py-2">
                    <p className="px-3 pt-1 text-gray-400">Min</p>
                    <input
                        type="number"
                        value={state.min}
                        onChange={(e) => handleMinChange(parseInt(e.target.value))}
                        className="w-full border-none bg-gray-lightest p-3 pb-1 pt-0 text-sm outline-none focus:shadow-none focus:ring-0"
                        min={0}
                        max={state.max}
                        readOnly
                    />
                </div>
                <div className="overflow-hidden rounded-lg border py-2">
                    <p className="px-3 pt-1 text-gray-400">Max</p>
                    <input
                        type="number"
                        value={state.max}
                        onChange={(e) => handleMaxChange(parseInt(e.target.value))}
                        className="w-full border-none bg-gray-lightest p-3 pb-1 pt-0 text-sm outline-none focus:shadow-none focus:ring-0"
                        min={state.min}
                        readOnly
                    />
                </div>
            </div>
        </div>
    );
}

API Reference

RangeSlider Props

Here is the API documentation of the RangeSlider component.

Props	Type	Description	Default
defaultValue	`number` `number[]`		__
size	RangesliderSizes	Sizes of the component are:	`"md"`
color	Rangeslidercolors	Change slider color	`"primary"`
prefixCls	`string`		__
className	`string`		__
style	`CSSProperties`		__
disabled	`boolean`		__
keyboard	`boolean`		__
autoFocus	`boolean`		__
onFocus	`((e: FocusEvent<HTMLDivElement, Element>) => void)`		__
onBlur	`((e: FocusEvent<HTMLDivElement, Element>) => void)`		__
range	`boolean`		__
count	`boolean`		__
min	`number`		__
max	`number`		__
step	`number` `null`		__
value	`number` `number[]`		__
onChange	RangeSliderOnchange		__
onBeforeChange	RangeSliderOnbeforechange		__
onAfterChange	RangeSliderOnafterchange		__
allowCross	`boolean`		__
pushable	`number` `boolean`		__
draggableTrack	`boolean`	range only	__
reverse	`boolean`		__
vertical	`boolean`		__
included	`boolean`		__
startPoint	`number`		__
trackStyle	`CSSProperties` `CSSProperties[]`		__
handleStyle	`CSSProperties` `CSSProperties[]`		__
railStyle	`CSSProperties`		__
dotStyle	`CSSProperties` `((dotValue: number) => CSSProperties)`		__
activeDotStyle	`CSSProperties` `((dotValue: number) => CSSProperties)`		__
marks	RangeSliderMarks		__
dots	`boolean`		__
handleRender	RangeSliderHandleRender		__
tabIndex	`number` `number[]`		__
ariaLabelForHandle	`string` `string[]`		__
ariaLabelledByForHandle	`string` `string[]`		__
ariaValueTextFormatterForHandle	`AriaValueFormat` `AriaValueFormat[]`		__

Note: You can check rc-slider documentation for more details.

Rangeslider Sizes

type RangesliderSize = "sm" | "md" | "lg" | "xl";

Rangeslider Colors

type Rangeslidercolors =
  | "primary"
  | "secondary"
  | "danger"
  | "info"
  | "success"
  | "warning";

Range Slider onChange

type RangeSliderOnchange = (value: number | number[]) => void;

Range Slider onBeforeChange

type RangeSliderOnbeforechange = (value: number | number[]) => void;

Range Slider onAfterChange

type RangeSliderOnafterchange = (value: number | number[]) => void;

Range Slider Marks

type RangeSliderMarks = Record<string | number, ReactNode | MarkObj>;

Range Slider Handle Render

type RangeSliderHandleRender = ((origin: ReactElement<HandleProps, string | JSXElementConstructor<any>>, props: RenderProps) => ReactElement<any, string | JSXElementConstructor<...>>);

Rc Slider

Installation​

Default​

Sizes​

Colors​

With Range​

With Marks & Steps​

With Marks & Steps in Range​

With Range Counter​

API Reference​

RangeSlider Props​

Rangeslider Sizes​

Rangeslider Colors​

Range Slider onChange​

Range Slider onBeforeChange​

Range Slider onAfterChange​

Range Slider Marks​

Range Slider Handle Render​