@heycar-uikit/core/slider/modern/Slider.js

The React UI library from HeyCar

import React from 'react';
import ReactSlider from 'react-slider';
import Typography from '../../typography/modern';
import { DEFAULT_LOCALE } from './Slider.constants.js';

var styles = {"sliderWrapper":"slider__sliderWrapper_9todc","heycarSlider":"slider__heycarSlider_9todc","isWithHistogram":"slider__isWithHistogram_9todc"};
 require('./styles/default.css');

const Slider = React.forwardRef(({ dataTestId, className, onChange, onAfterChange, locale = DEFAULT_LOCALE, minDistance, stepCount, selectedRangeIndexes, ariaValueText, isWithHistogram, ...rest }, ref) => {
    function removeDraggingClass() {
        const activeThumb = document.getElementsByClassName('dragging')[0];
        if (activeThumb)
            activeThumb.blur();
    }
    return (React.createElement("div", { className: `${styles.sliderWrapper} ${isWithHistogram ? styles.isWithHistogram : ''} ${className}`, "data-test-id": dataTestId, ref: ref, ...rest },
        React.createElement(ReactSlider, { ariaLabel: [locale.thumb1, locale.thumb2], ariaValuetext: ariaValueText, className: styles.heycarSlider, max: stepCount - 1, min: 0, minDistance: minDistance, onAfterChange: (values, thumbIndex) => {
                removeDraggingClass();
                if (onAfterChange)
                    onAfterChange([values[0], values[1]], thumbIndex);
            }, onChange: (value, thumbIndex) => onChange && onChange([value[0], value[1]], thumbIndex), pearling: true, renderThumb: (p, state) => (React.createElement("div", { ...p }, isWithHistogram && (React.createElement(Typography, { Component: "span", className: "tooltip", variant: "caption5" },
                typeof ariaValueText === 'function'
                    ? ariaValueText(state)
                    : ariaValueText
                        ? ariaValueText
                        : '',
                state.valueNow)))), thumbActiveClassName: "dragging", thumbClassName: "range-slider__thumb", trackClassName: "range-slider__track", value: selectedRangeIndexes || [0, stepCount - 1] })));
});

export { Slider, Slider as default };