RangeSlider Component

RangeSlider is a React component designed to create customizable input fields with options such as color, min max steps value, and more. It supports different sizes and colors along with disabled and checked states.

Example Preview

RangeSlider Example

Usage

import { RangeSlider } from "@/@core";
 
// ...
 
const MyComponent = () => {
  return (
    <Fragment>
      <RangeSlider color="primary" />
      <RangeSlider steps={25} />
      <RangeSlider disabled />
    </Fragment>
  );
};
 
export default MyComponent;

Props

Prop name	Type	Default value	Required	Description
`min`	number	-	No	Number representing the minimum value of the slider.
`max`	number	-	No	Number representing the maximum value of the slider.
`steps`	number	-	No	Number representing the steps of the slider.
`value`	number	-	No	Number representing the value of the slider.
`color`	`primary`, `secondary`, `error`, `success`, `warning`, `info`, `accent`	-	No	String representing the color theme of the checkbox.
`disabled`	boolean	-	No	Boolean indicating whether the checkbox is disabled.
`size`	`xs`, `sm`, `md`, `lg`	-	No	String representing the size of the checkbox.
`className`	string	-	No	Additional class names for styling purposes.
`props`	HTMLAttributes<HTMLInputElement>	-	No	Additional HTML attributes can be passed as well.

Styling

The component provides various styling options based on the color and size props. The label text size and color can be customized accordingly.

All Available Props

import { RangeSlider } from '@/@core';
 
// ...
 
const AllAvailableProps = () => {
   return (
      <Fragment>
         <RangeSlider
            color={/* 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | 'accent' */}
            disabled={/* boolean */}
            size={/* 'xs' | 'sm' | 'md' | 'lg' */}
            min={/* number */}
            max={/* number */}
            steps={/* number */}
            value={/* number */}
            className={/* string */}
            /* Other HTML attributes for the input element */
          />
      </Fragment>
   );
};
 
export default AllAvailableProps;

ℹ️

Note: The RangeSlider component is inspired by the DaisyUI (opens in a new tab) framework. Check it out for more awesome components. But our RangeSlider component is dynamic and easy to use. It is also fully customizable.

Radio Ratings