React Range Slider

Let's discover React Range Slider in less than 2 minutes.

Documentation

Getting Started

Get started by installing the package.

npm install @inkdev/react-range-slider

Props

Prop	Type	Required	Default Value	Description
value	number	Yes	N/A	Current value of the slider
onChange	ChangeEventHandler<HTMLInputElement>	Yes	N/A	Event handler for value change
componentWidth	string	No	'100%'	Width of the component
disabled	boolean	No	false	Whether the component is disabled
sliderColor	string	No	'#77bb41'	Color of the slider
trackBgColor	string	No	'#F2F1F1'	Background color of the track
trackBorderColor	string	No	'#E7E6E4'	Border color of the track
categoryName	string	No	N/A	Category name
max	number	No	10	Maximum value of the slider
min	number	No	0	Minimum value of the slider
tooltipPosition	'above' | 'under'	No	'under'	Position of the tooltip relative to the slider
labels	boolean	No	true	Whether to display labels

Usage

import React from 'react';
import { RangeSlider, RangeSliderProps } from '@inkdev/react-range-slider';
import { useState } from 'react';

const MyComponent = () => {
    const [value, setValue] = useState(0);

    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const newValue = parseInt(e.target.value, 10);
        setValue(newValue);
    };

    const sliderProps: RangeSliderProps = {
        componentWidth: '100%',
        disabled: false,
        sliderColor: '#77bb41',
        trackBgColor: '#F2F1F1',
        trackBorderColor: '#E7E6E4',
        value: value,
        onChange: handleOnChange,
        categoryName: '',
        max: 10,
        min: 0,
        tooltipPosition: 'under',
        labels: true,
    };

    return <RangeSlider {...sliderProps} />;
};

export default MyComponent;

Contributing

Thank you for considering contributing to our project! Please read our Contribution Guide for details on how to get started.