semantic-ui-react-slider

Slider control for Semantic UI React

Based on React Compound Slider

Prerequisites

"react": "^16.8.0",
"react-dom": "^16.8.0",
"semantic-ui-react": "^0.87.0"

Installation

npm install --save semantic-ui-react-slider

Demo

SliderView demo

Example usage

import React, { useCallback, useState } from 'react';
import SliderView from 'semantic-ui-react-slider';

const SliderExample = () => {
    const [minSelectedValue, setMinSelectedValue] = useState(0);
    const [maxSelectedValue, setMaxSelectedValue] = useState(100);
    
    const onSliderValuesChange = useCallback((minValue: number, maxValue: number) => {
        setMinSelectedValue(minValue);
        setMaxSelectedValue(maxValue);
      }, []);
   
    return (<SliderView onSliderValuesChange={onSliderValuesChange} sliderMinValue={0} sliderMaxValue={100} />);
}

Mandatory properties

sliderMinValue: number
onSliderValuesChange: (minValue: number, maxValue: number) => void,
     

Optional properties

| property             | type     | description                              |
| ---------------------|-----------------------------------------------------|
| className            | string   | className for root div                   |    
| selectedMinValue     | number   | Selected minimum value                   |
| selectedMaxValue     | number   | Selected max value                       |
| sliderStyle          | Object   | Style for slider                         |
| sliderRailStyle      | Object   | Style for slider rail                    |
| sliderTrackStyle     | Object   | Style for slider track                   |
| sliderHandleStyle    | Object   | Style for slider handle                  |

License

MIT License