rc-slider Design improvements

Slider.module.less

@import '../../../theme/palette.less';


@slider-bg-color: lighten(@body-background-color, 15%);
@track-bg-color: mix(@text-color, @slider-bg-color, 80%);
@movement-duration: 0s;
@movement-easing: cubic-bezier(0, 0, 0, 1);

.slider {
    user-select: none;

    &:global(.rc-slider-disabled) {
        background-color: transparent;
    }

    &:global(.rc-slider-with-marks) {
        margin-bottom: 1em;
    }

    :global(.rc-slider-rail) {
        background: @slider-bg-color;
    }

    :global(.rc-slider-track) {
        border-radius: inherit;
        background-color: @track-bg-color;
        transition: width @movement-duration @movement-easing;
        z-index: 1;
    }

    :global(.rc-slider-handle) {
        border: none;
        background: @text-color;
        transition: left @movement-duration, box-shadow .2s;
        transition-timing-function: @movement-easing, ease;
        z-index: 1;

        &:active {
            box-shadow: 0 0 1em @text-color;
        }
    }

    :global(.rc-slider-step) {
        :global(.rc-slider-dot) {
            transition: background .2s;
            background: @slider-bg-color;
            border: none;

            &:global(.rc-slider-dot-active) {
                background: @track-bg-color;
            }
        }
    }

    :global(.rc-slider-mark) {
        :global(.rc-slider-mark-text) {
            transition: .2s;
            color: fade(@text-color, 40%);

            &:global(.rc-slider-mark-text-active) {
                color: fade(@text-color, 90%);
            }
        }
    }
}

Slider.tsx

import React from 'react';
import classNames from 'classnames';
import {default as RcSlider, SliderProps as RcSliderProps} from 'rc-slider';

import classes from './Slider.module.less';


function Slider({className, min, max, marks = {}, ...rest}: SliderProps) {
    return <RcSlider
        className={classNames(classes.slider, className)}
        min={min}
        max={max}
        {...rest}
        marks={{
            ...marks,
            [min]: min.toString(),
            [max]: max.toString(),
        }}
    />;
}

interface SliderProps extends RcSliderProps {

}

export default Slider;