tdesign-vue/esm/slider/slider.js

tdesign-vue

/**
 * tdesign v1.15.0
 * (c) 2026 tdesign
 * @license MIT
 */

import { h as helper } from '../_chunks/dep-23f4ec37.js';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _typeof from '@babel/runtime/helpers/typeof';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { emitEvent } from '../utils/event.js';
import props from './props.js';
import { InputNumber } from '../input-number/index.js';
import TSliderMark from './slider-mark.js';
import TSliderButton from './slider-button.js';
import { getClassPrefixMixins } from '../config-provider/config-receiver.js';
import mixins from '../utils/mixins.js';
import '../utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash-es';
import '@vue/composition-api';
import '../input-number/input-number.js';
import 'tdesign-icons-vue';
import '../button/index.js';
import '../button/button.js';
import '../loading/index.js';
import '../loading/directive.js';
import '../loading/plugin.js';
import 'vue';
import '../loading/loading.js';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/setStyle.js';
import '../_common/js/utils/helper.js';
import '../utils/dom.js';
import 'raf';
import '../utils/easing.js';
import '../utils/render-tnode.js';
import '@babel/runtime/helpers/readOnlyError';
import '../utils/transfer-dom.js';
import '../loading/props.js';
import '../config.js';
import '../config-provider/context.js';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/zh_CN.js';
import '../_chunks/dep-f96e5597.js';
import '../_chunks/dep-b7176ef3.js';
import 'dayjs';
import '../_chunks/dep-77bb0823.js';
import '../config-provider/type.js';
import '../_common/js/global-config/t.js';
import '../utils/withInstall.js';
import './style/index.js';
import '../loading/type.js';
import '../button/props.js';
import '../utils/ripple.js';
import '../button/type.js';
import '../input/index.js';
import '../input/input.js';
import '../input/props.js';
import '../_common/js/log/index.js';
import '../_common/js/log/log.js';
import '../input/input-group.js';
import '../utils/map-props.js';
import '../input/type.js';
import '../input-number/props.js';
import '../input-number/useInputNumber.js';
import '../hooks/useCommonClassName.js';
import '../config-provider/useConfig.js';
import '../hooks/useVModel.js';
import '../_common/js/input-number/number.js';
import '../_common/js/input-number/large-number.js';
import '../hooks/useFormDisabled.js';
import '../hooks/useGlobalIcon.js';
import '../hooks/useConfig.js';
import '../input-number/type.js';
import '../tooltip/index.js';
import '../tooltip/tooltip.js';
import '../tooltip/props.js';
import '../popup/props.js';
import '../popup/popup.js';
import '@popperjs/core';
import '../popup/container.js';
import '../popup/utils.js';
import '../tooltip/type.js';
import '../_common/js/slider/utils.js';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var classPrefixMixins = getClassPrefixMixins("slider");
var _Slider = mixins(classPrefixMixins).extend({
  name: "TSlider",
  model: {
    prop: "value",
    event: "change"
  },
  props: _objectSpread({}, props),
  components: {
    TSliderMark: TSliderMark,
    TInputNumber: InputNumber
  },
  provide: function provide() {
    return {
      slider: this
    };
  },
  data: function data() {
    return {
      firstValue: 0,
      secondValue: 0,
      prevValue: 0,
      dragging: false,
      sliderSize: 1,
      inputDecimalPlaces: 0,
      inputFormat: null,
      inputPlaceholder: "",
      inputTheme: "column",
      showSteps: false,
      formDisabled: void 0
    };
  },
  computed: {
    tDisabled: function tDisabled() {
      return this.formDisabled || this.disabled;
    },
    containerClass: function containerClass() {
      return ["".concat(this.componentName, "__container"), {
        "is-vertical": this.vertical
      }];
    },
    sliderClass: function sliderClass() {
      return ["".concat(this.componentName), _defineProperty(_defineProperty(_defineProperty({
        "is-vertical": this.vertical
      }, "".concat(this.componentName, "--with-input"), this.inputNumberProps), "".concat(this.componentName, "--vertical"), this.vertical), "".concat(this.classPrefix, "-is-disabled"), this.tDisabled)];
    },
    sliderRailClass: function sliderRailClass() {
      return ["".concat(this.componentName, "__rail"), _defineProperty({
        "show-input": this.inputNumberProps
      }, "".concat(this.classPrefix, "-is-disabled"), this.tDisabled)];
    },
    sliderNumberClass: function sliderNumberClass() {
      return ["".concat(this.componentName, "__input"), {
        "is-vertical": this.vertical
      }];
    },
    vertical: function vertical() {
      return this.layout === "vertical";
    },
    rangeDiff: function rangeDiff() {
      return this.max - this.min;
    },
    steps: function steps() {
      var _this = this;
      var min = this.min,
        max = this.max,
        rangeDiff = this.rangeDiff,
        step = this.step;
      if (!this.showSteps || min > max) return [];
      if (this.step === 0) {
        console.warn("[Element Warn][Slider]step should not be 0.");
        return [];
      }
      var stepCount = rangeDiff / step;
      var stepWidth = 100 * step / rangeDiff;
      var result = [];
      for (var i = 1; i < stepCount; i++) {
        result.push(i * stepWidth);
      }
      if (this.range) {
        return result.filter(function (step2) {
          return step2 < 100 * (_this.minValue - min) / rangeDiff || step2 > 100 * (_this.maxValue - min) / rangeDiff;
        });
      }
      return result.filter(function (step2) {
        return step2 > 100 * (_this.firstValue - min) / rangeDiff;
      });
    },
    markList: function markList() {
      var _this2 = this;
      if (!this.marks) {
        return [];
      }
      var legalMarks = [];
      Object.keys(this.marks).map(parseFloat).sort(function (a, b) {
        return a - b;
      }).filter(function (point) {
        return point <= _this2.max && point >= _this2.min;
      }).forEach(function (point) {
        var item = {
          point: point,
          position: (point - _this2.min) * 100 / _this2.rangeDiff,
          mark: _this2.marks[point]
        };
        legalMarks.push(item);
      });
      return legalMarks;
    },
    minValue: function minValue() {
      return Math.min(this.firstValue, this.secondValue);
    },
    maxValue: function maxValue() {
      return Math.max(this.firstValue, this.secondValue);
    },
    barSize: function barSize() {
      var diff = this.range ? this.maxValue - this.minValue : this.prevValue - this.min;
      return "".concat(100 * diff / this.rangeDiff, "%");
    },
    barStart: function barStart() {
      return this.range ? "".concat(100 * (this.minValue - this.min) / this.rangeDiff, "%") : "0%";
    },
    precision: function precision() {
      var precisions = [this.min, this.max, this.step].map(function (item) {
        var decimalArr = "".concat(item).split(".");
        return decimalArr[1] ? decimalArr[1].length : 0;
      });
      return Math.max.apply(null, precisions);
    },
    runwayStyle: function runwayStyle() {
      return this.vertical ? {
        height: "100%"
      } : {};
    },
    barStyle: function barStyle() {
      return this.vertical ? {
        height: this.barSize,
        bottom: this.barStart
      } : {
        width: this.barSize,
        left: this.barStart
      };
    },
    calcInputNumberProps: function calcInputNumberProps() {
      var defaultInputNumberProps = {
        placeholder: "",
        theme: "column"
      };
      if (_typeof(this.inputNumberProps) === "object") {
        return _objectSpread(_objectSpread({}, defaultInputNumberProps), this.inputNumberProps);
      }
      return defaultInputNumberProps;
    }
  },
  watch: {
    value: function value(newVal) {
      if (this.dragging === true) return;
      if (Array.isArray(newVal) && this.range) {
        var _newVal = _slicedToArray(newVal, 2);
        this.firstValue = _newVal[0];
        this.secondValue = _newVal[1];
      } else {
        this.prevValue = newVal;
      }
    },
    dragging: function dragging(newVal) {
      if (newVal === false) {
        this.init();
      }
    }
  },
  mounted: function mounted() {
    this.init();
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener("resize", this.resetSize);
  },
  methods: {
    init: function init() {
      var valuetext;
      var min = this.min,
        max = this.max,
        value = this.value;
      if (this.range) {
        if (Array.isArray(value)) {
          var _value$, _value$2;
          this.firstValue = Math.max(min || 0, (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : 0);
          this.secondValue = Math.min(max || 100, (_value$2 = value[1]) !== null && _value$2 !== void 0 ? _value$2 : 0);
        } else {
          this.firstValue = min || 0;
          this.secondValue = max || 100;
        }
        valuetext = "".concat(this.firstValue, "-").concat(this.secondValue);
      } else {
        if (typeof this.value !== "number") {
          this.prevValue = min;
        } else {
          this.prevValue = Math.min(max, Math.max(min, value));
        }
        valuetext = String(this.prevValue);
      }
      this.$el.setAttribute("aria-valuetext", valuetext);
      this.resetSize();
      window.addEventListener("resize", this.resetSize);
    },
    valueChanged: function valueChanged() {
      var _this3 = this;
      if (this.range) {
        return ![this.minValue, this.maxValue].every(function (item, index) {
          return item === _this3.prevValue[index];
        });
      }
      return this.value !== this.prevValue;
    },
    setValues: function setValues(value) {
      var _ref3 = [this.min, this.max],
        min = _ref3[0],
        max = _ref3[1];
      if (min > max) {
        console.warn("[Slider] max should be greater than min.");
        return;
      }
      if (this.range && Array.isArray(value)) {
        var _ref4 = [Math.min.apply(Math, _toConsumableArray(value)), Math.max.apply(Math, _toConsumableArray(value))],
          firstValue = _ref4[0],
          secondValue = _ref4[1];
        if (firstValue > max) firstValue = this.firstValue;
        if (firstValue < min) firstValue = min;
        if (secondValue < min) secondValue = this.secondValue;
        if (secondValue > max) secondValue = max;
        return [firstValue, secondValue];
      }
      var prevValue = value;
      if (prevValue < min) prevValue = min;
      if (prevValue > max) prevValue = max;
      return prevValue;
    },
    setPosition: function setPosition(percent) {
      var targetValue = percent * this.rangeDiff / 100;
      targetValue = this.min + targetValue;
      if (!this.range) {
        this.$refs.button1.setPosition(percent);
        return;
      }
      var button;
      if (Math.abs(this.minValue - targetValue) < Math.abs(this.maxValue - targetValue)) {
        button = this.firstValue < this.secondValue ? "button1" : "button2";
      } else {
        button = this.firstValue > this.secondValue ? "button1" : "button2";
      }
      this.$refs[button].setPosition(percent);
    },
    onSliderClick: function onSliderClick(event) {
      if (this.tDisabled || this.dragging) {
        return;
      }
      this.resetSize();
      var value = 0;
      if (this.vertical) {
        var sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;
        value = (sliderOffsetBottom - event.clientY) / this.sliderSize * 100;
        this.setPosition(value);
      } else {
        var sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
        value = (event.clientX - sliderOffsetLeft) / this.sliderSize * 100;
        this.setPosition(value);
      }
    },
    resetSize: function resetSize() {
      if (this.$refs.slider) {
        this.sliderSize = this.$refs.slider["client".concat(this.vertical ? "Height" : "Width")];
      }
    },
    emitChange: function emitChange(value) {
      var changeValue = value;
      if (changeValue === void 0) {
        if (this.range) {
          changeValue = [this.firstValue, this.secondValue];
        } else {
          changeValue = this.prevValue;
        }
      }
      var fixValue = this.setValues(changeValue);
      emitEvent(this, "change", fixValue);
    },
    emitChangeEnd: function emitChangeEnd() {
      emitEvent(this, "change-end", this.value);
    },
    getStopStyle: function getStopStyle(position) {
      return this.vertical ? {
        top: "calc(".concat(100 - position, "% - 1px)")
      } : {
        left: "".concat(position, "%")
      };
    },
    changeValue: function changeValue(point) {
      if (this.tDisabled || this.dragging) {
        return;
      }
      this.resetSize();
      var value = Number(point / this.rangeDiff * 100);
      this.setPosition(value);
      this.emitChange(point);
    },
    renderMask: function renderMask() {
      var _this4 = this;
      var h = this.$createElement;
      if (this.markList.length) {
        return h("div", [h("div", {
          "class": "".concat(this.componentName, "__stops")
        }, [this.markList.map(function (item, index) {
          if (item.position === 0 || item.position === 100) return null;
          return h("div", {
            "class": ["".concat(_this4.componentName, "__stop"), "".concat(_this4.componentName, "__mark-stop")],
            "style": _this4.getStopStyle(item.position),
            "key": index
          });
        })]), h("div", {
          "class": "".concat(this.componentName, "__mark")
        }, [this.markList.map(function (item, key) {
          return h("t-slider-mark", {
            "attrs": {
              "mark": item.mark,
              "point": item.point
            },
            "key": key,
            "style": _this4.getStopStyle(item.position),
            "on": {
              "change-value": _this4.changeValue
            }
          });
        })])]);
      }
    },
    renderInputButton: function renderInputButton() {
      var _this5 = this;
      var h = this.$createElement;
      var max = this.max,
        min = this.min,
        sliderNumberClass = this.sliderNumberClass,
        range = this.range;
      return h("div", {
        "class": ["".concat(this.componentName, "__input-container"), {
          "is-vertical": this.vertical
        }]
      }, [h("t-input-number", helper([{
        "class": sliderNumberClass,
        "attrs": {
          "value": range ? this.firstValue : this.prevValue,
          "step": this.step,
          "disabled": this.tDisabled,
          "min": min,
          "max": max
        },
        "ref": "input",
        "on": {
          "change": function change(v) {
            _this5.range ? _this5.emitChange([v, _this5.secondValue]) : _this5.emitChange(v);
          }
        }
      }, {
        "props": this.calcInputNumberProps
      }])), range && h("div", {
        "class": "".concat(this.componentName, "__center-line")
      }), range && h("t-input-number", helper([{
        "class": this.sliderNumberClass,
        "attrs": {
          "value": this.secondValue,
          "step": this.step,
          "disabled": this.tDisabled,
          "min": min,
          "max": max
        },
        "ref": "input",
        "on": {
          "input": function input(v) {
            _this5.emitChange([_this5.firstValue, v]);
          }
        }
      }, {
        "props": this.calcInputNumberProps
      }]))]);
    }
  },
  render: function render() {
    var _this6 = this;
    var h = arguments[0];
    var min = this.min,
      max = this.max,
      layout = this.layout,
      disabled = this.disabled,
      vertical = this.vertical,
      range = this.range;
    var buttonGroup = this.inputNumberProps && this.renderInputButton();
    var masks = this.renderMask();
    return h("div", {
      "class": this.containerClass
    }, [h("div", {
      "class": this.sliderClass,
      "attrs": {
        "role": "slider",
        "aria-valuemin": min,
        "aria-valuemax": max,
        "aria-orientation": layout,
        "aria-disabled": disabled,
        "tooltip-props": this.tooltipProps
      }
    }, [h("div", {
      "class": this.sliderRailClass,
      "style": this.runwayStyle,
      "on": {
        "click": this.onSliderClick
      },
      "ref": "slider"
    }, [h("div", {
      "class": "".concat(this.componentName, "__track"),
      "style": this.barStyle
    }), h(TSliderButton, {
      "attrs": {
        "vertical": vertical,
        "value": range ? this.firstValue : this.prevValue,
        "disabled": this.tDisabled,
        "label": this.label,
        "range": this.range,
        "position": "start",
        "tooltip-props": this.tooltipProps
      },
      "ref": "button1",
      "on": {
        "input": function input(v) {
          range ? _this6.emitChange([v, _this6.secondValue]) : _this6.emitChange(v);
        },
        "mouseup": this.emitChangeEnd
      }
    }), this.range && h(TSliderButton, {
      "attrs": {
        "vertical": vertical,
        "value": this.secondValue,
        "disabled": this.tDisabled,
        "range": this.range,
        "position": "end",
        "label": this.label,
        "tooltip-props": this.tooltipProps
      },
      "ref": "button2",
      "on": {
        "input": function input(v) {
          _this6.emitChange([_this6.firstValue, v]);
        },
        "mouseup": this.emitChangeEnd
      }
    }), this.showSteps && h("div", {
      "class": "".concat(this.componentName, "__stops")
    }, [this.steps.map(function (item, key) {
      if (item.position === 0 || item.position === 100) return null;
      return h("div", {
        "class": "".concat(_this6.componentName, "__stop"),
        "key": key,
        "style": _this6.getStopStyle(item)
      });
    })]), masks])]), buttonGroup]);
  }
});

export { _Slider as default };
//# sourceMappingURL=slider.js.map