devextreme/esm/__internal/viz/range_selector/slider.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/viz/range_selector/slider.js)
 * Version: 25.2.5
 * Build date: Fri Feb 20 2026
 *
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
import supportUtils from "../../core/utils/m_support";
import {
    formatValue,
    isFirefoxOnAndroid,
    utils
} from "../../viz/range_selector/common";
import SliderMarker from "../../viz/range_selector/slider_marker";
const animationSettings = utils.animationSettings;
const SPLITTER_WIDTH = 8;
const TOUCH_SPLITTER_WIDTH = 20;

function getSliderTrackerWidth(sliderHandleWidth) {
    return supportUtils.touchEvents || supportUtils.pointerEvents ? 20 : 8 < sliderHandleWidth ? sliderHandleWidth : 8
}

function Slider(params, index) {
    this._translator = params.translator;
    this._sliderGroup = params.renderer.g().attr({
        class: "slider"
    }).append(params.root);
    this._line = params.renderer.path(null, "line").append(this._sliderGroup);
    this._marker = new SliderMarker(params.renderer, this._sliderGroup, 1 === index);
    this._tracker = params.renderer.rect().attr({
        class: "slider-tracker",
        fill: "#000000",
        opacity: 1e-4
    }).css({
        cursor: "w-resize"
    }).append(params.trackersGroup)
}
Slider.prototype = {
    constructor: Slider,
    cancelAnimation() {
        this._sliderGroup.stopAnimation();
        this._tracker.stopAnimation()
    },
    applyPosition(isAnimated) {
        const that = this;
        const slider = that._sliderGroup;
        const tracker = that._tracker;
        const sliderAttrs = {
            translateX: that._position
        };
        let trackerAttrs = {
            translateX: that._position
        };
        if (isFirefoxOnAndroid()) {
            trackerAttrs = {
                x: that._position - tracker._originalWidth / 2
            }
        }
        that._marker.setPosition(that._position);
        if (isAnimated) {
            slider.animate(sliderAttrs, animationSettings);
            tracker.animate(trackerAttrs, animationSettings)
        } else {
            slider.attr(sliderAttrs);
            tracker.attr(trackerAttrs)
        }
    },
    _setValid(isValid) {
        this._marker.setValid(isValid);
        this._line.attr({
            stroke: this._colors[Number(isValid)]
        })
    },
    _setText(text) {
        this._marker.setText(text)
    },
    update(verticalRange, sliderHandleOptions, sliderMarkerOptions) {
        this._formatOptions = {
            format: sliderMarkerOptions.format,
            customizeText: sliderMarkerOptions.customizeText
        };
        this._marker.applyOptions(sliderMarkerOptions, this._translator.getScreenRange());
        this._colors = [sliderMarkerOptions.invalidRangeColor, sliderHandleOptions.color];
        this._sliderGroup.attr({
            translateY: verticalRange[0]
        });
        this._line.attr({
            "stroke-width": sliderHandleOptions.width,
            stroke: sliderHandleOptions.color,
            "stroke-opacity": sliderHandleOptions.opacity,
            sharp: "h",
            points: [0, 0, 0, verticalRange[1] - verticalRange[0]]
        });
        const trackerWidth = getSliderTrackerWidth(sliderHandleOptions.width);
        const trackerAttrs = {
            x: -trackerWidth / 2,
            width: trackerWidth,
            height: verticalRange[1] - verticalRange[0],
            y: isFirefoxOnAndroid() ? verticalRange[0] : 0,
            translateY: isFirefoxOnAndroid() ? void 0 : verticalRange[0]
        };
        this._tracker.attr(trackerAttrs)
    },
    toForeground() {
        this._sliderGroup.toForeground()
    },
    getSliderTracker() {
        return this._tracker
    },
    getPosition() {
        return this._position
    },
    setDisplayValue(value) {
        this._value = value;
        this._setText(formatValue(value, this._formatOptions))
    },
    setOverlapped(isOverlapped) {
        this._marker.setOverlapped(isOverlapped)
    },
    getValue() {
        return this._value
    },
    on(event, handler) {
        this._tracker.on(event, handler);
        this._marker.getTracker().on(event, handler)
    },
    getCloudBorder() {
        return this._marker.getBorderPosition()
    },
    dispose() {
        this._marker.dispose()
    }
};
export default Slider;