The RangeSlider displays a range of values along a bar, allowing users to select a number value visually.


Import the component from pol-ui to use the RangeSlider element:

import { RangeSlider } from "pol-ui";

Default RangeSlider

Default RangeSlider

import { RangeSlider } from "pol-ui";
export const RangeSliderComponent = (): JSX.Element => {
  return <RangeSlider />;


Prop nameTypeDefaultDescription
themeRangeSliderThemeThe theme object to customize the appearance of the RangeSlider component.
colorColorsColorsEnum.primaryThe color of the RangeSlider component.

You can also provide any prop comming from the HTML input tag.


To learn more about how to customize the appearance of components, please see the Theme docs.

interface RangeSliderTheme {
  root: { base: string };
  field: {
    base: string;
    input: {
      base: string;
      sizes: MainSizesType;

Since March 1, 2024

Proudly Open Source
  • Npm

  • Github

  • Creator

  • Made with love and Pol-ui by Pol Gubau Amores