Step react-compound-slider

gistfile1.txt

import React, { Component } from 'react'
import { Slider, Rail, Handles, Tracks, Ticks } from 'react-compound-slider'

const sliderStyle = {
    position: 'relative',
    width: '100%',
}

const railStyle = {
    position: 'absolute',
    width: '100%',
    height: 14,
    marginTop: 35,
    borderRadius: 7,
    cursor: 'pointer',
    backgroundColor: 'rgb(155,155,155)',
}

const handleStyle = {
    position: 'absolute',
    marginLeft: -11,
    marginTop: 14,
    zIndex: 2,
    width: 24,
    height: 24,
    cursor: 'pointer',
    borderRadius: '50%',
    backgroundColor: 'rgb(255,255,255)',
    boxShadow: '1px 1px 1px 1px rgba(0,0,0,0.2)',
}

const format = d => d

const Handle = ({
    handle: { id, value, percent },
    getHandleProps,
}) => {
    return (
        <div
            style={{
                ...handleStyle,
                left: `${percent}%`,
            }}
            {...getHandleProps(id)}
        />
    )
}

const Track = ({ source, target, getTrackProps }) => {
    return (
        <div
            style={{
                position: 'absolute',
                height: 14,
                zIndex: 1,
                marginTop: 35,
                backgroundColor: '#548BF4',
                borderRadius: 7,
                cursor: 'pointer',
                left: `${source.percent}%`,
                width: `${target.percent - source.percent}%`,
            }}
            {...getTrackProps()} // this will set up events if you want it to be clickeable (optional)
        />
    )
}

const Test = () => {

    const handleStepChange = (value) => {
        // Get current va    
        let steps = [0, 2,3,5,10,15,20]

        console.log("steps", steps[value])
    }

    return (
        <div style={{ height: 120, width: '80%', margin: "auto" }}>
            <Slider
                mode={2}
                domain={[1, 6]}
                step={1}
                rootStyle={sliderStyle}
                //onChange={handleStepChange}
                onUpdate={handleStepChange}
                values={[1]}
            >
                <Rail>
                    {({ getRailProps }) => <div style={railStyle} {...getRailProps()} />}
                </Rail>
                <Handles>
                    {({ handles, getHandleProps }) => (
                        <div className="slider-handles">
                            {handles.map(handle => (
                                <Handle
                                    key={handle.id}
                                    handle={handle}
                                    getHandleProps={getHandleProps}
                                />
                            ))}
                        </div>
                    )}
                </Handles>
                <Tracks right={false}>
                    {({ tracks, getTrackProps }) => (
                        <div className="slider-tracks">
                            {tracks.map(({ id, source, target }) => (
                                <Track
                                    key={id}
                                    source={source}
                                    target={target}
                                    getTrackProps={getTrackProps}
                                />
                            ))}
                        </div>
                    )}
                </Tracks>
                <Ticks count={6}>
                    {({ ticks }) => (
                        <div className="slider-ticks">
                            {ticks.map(tick => (
                                <Tick key={tick.id} tick={tick} count={ticks.length} format={format} />
                            ))}
                        </div>
                    )}
                </Ticks>
            </Slider>
        </div>
    )
}

const Tick = ({ tick, count, format }) => {

    const arr = [0,2,3,5,10,15,20]

    return (
        <div>
            <div
                style={{
                    position: 'absolute',
                    marginTop: 52,
                    width: 1,
                    height: 5,
                    backgroundColor: 'rgb(200,200,200)',
                    left: `${tick.percent}%`,
                }}
            />
            <div
                style={{
                    position: 'absolute',
                    marginTop: 58,
                    fontSize: 10,
                    textAlign: 'center',
                    marginLeft: `${-(100 / count) / 2}%`,
                    width: `${100 / count}%`,
                    left: `${tick.percent}%`,
                }}
            >
                {arr[format(tick.value)]} Lakhs
            </div>
        </div>
    )
}

export default Test;