ReactSlider.md

Single slider, similar to <input type="range" defaultValue={0} />

<ReactSlider
    className="horizontal-slider"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    renderThumb={(props, state) => <div {...props}>{state.value}</div>}
/>

Double slider

<ReactSlider
    className="horizontal-slider"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    defaultValue={[0, 100]}
    ariaLabel={['Lower thumb', 'Upper thumb']}
    ariaValuetext={({ index, value }) => `Thumb value ${value[index]}`}
    renderThumb={(props, state) => <div {...props}>{state.value[state.index]}</div>}
    pearling
    minDistance={10}
/>

Multi slider

<ReactSlider
    className="horizontal-slider"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    defaultValue={[0, 50, 100]}
    ariaLabel={['Leftmost thumb', 'Middle thumb', 'Rightmost thumb']}
    renderThumb={(props, state) => <div {...props}>{state.value[state.index]}</div>}
    pearling
    minDistance={10}
/>

Vertical slider

<ReactSlider
    className="vertical-slider"
    thumbClassName="example-thumb"
    trackClassName="example-track"
    defaultValue={[0, 50, 100]}
    ariaLabel={['Lowest thumb', 'Middle thumb', 'Top thumb']}
    renderThumb={(props, state) => <div {...props}>{state.value[state.index]}</div>}
    orientation="vertical"
    invert
    pearling
    minDistance={10}
/>

Custom styling using styled-components

import styled from 'styled-components';

const StyledSlider = styled(ReactSlider)`
    width: 100%;
    height: 25px;
`;

const StyledThumb = styled.div`
    height: 25px;
    line-height: 25px;
    width: 25px;
    text-align: center;
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    cursor: grab;
`;

const Thumb = (props, state) => <StyledThumb {...props}>{state.value[state.index]}</StyledThumb>;

const StyledTrack = styled.div`
    top: 0;
    bottom: 0;
    background: ${props => props.index === 2 ? '#f00' : props.index === 1 ? '#0f0' : '#ddd'};
    border-radius: 999px;
`;

const Track = (props, state) => <StyledTrack {...props} index={state.index} />;

<StyledSlider
    defaultValue={[50, 75]}
    renderTrack={Track}
    renderThumb={Thumb}
/>