primevue/slider/index.mjs

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

import { cn } from '@primeuix/utils';
import { getAttribute, isRTL, getWindowScrollLeft, getWindowScrollTop } from '@primeuix/utils/dom';
import BaseEditableHolder from '@primevue/core/baseeditableholder';
import SliderStyle from 'primevue/slider/style';
import { openBlock, createElementBlock, mergeProps, createElementVNode, createCommentVNode } from 'vue';

var script$1 = {
  name: 'BaseSlider',
  "extends": BaseEditableHolder,
  props: {
    min: {
      type: Number,
      "default": 0
    },
    max: {
      type: Number,
      "default": 100
    },
    orientation: {
      type: String,
      "default": 'horizontal'
    },
    step: {
      type: Number,
      "default": null
    },
    range: {
      type: Boolean,
      "default": false
    },
    readonly: {
      type: Boolean,
      "default": false
    },
    disabledMinHandle: {
      type: Boolean,
      "default": false
    },
    disabledMaxHandle: {
      type: Boolean,
      "default": false
    },
    minStepsBetweenHandles: {
      type: Number,
      "default": 0
    },
    inputId: {
      type: String,
      "default": null
    },
    inputClass: {
      type: [String, Object, Array],
      "default": null
    },
    inputStyle: {
      type: Object,
      "default": null
    },
    tabindex: {
      type: Number,
      "default": 0
    },
    ariaLabelledby: {
      type: String,
      "default": null
    },
    ariaLabel: {
      type: String,
      "default": null
    }
  },
  style: SliderStyle,
  provide: function provide() {
    return {
      $pcSlider: this,
      $parentInstance: this
    };
  }
};

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var script = {
  name: 'Slider',
  "extends": script$1,
  inheritAttrs: false,
  emits: ['change', 'slideend'],
  handleIndex: null,
  initX: null,
  initY: null,
  barWidth: null,
  barHeight: null,
  dragListener: null,
  dragEndListener: null,
  data: function data() {
    return {
      d_dragging: false,
      d_focusedIndex: null
    };
  },
  beforeUnmount: function beforeUnmount() {
    this.unbindDragListeners();
  },
  methods: {
    updateDomData: function updateDomData() {
      var rect = this.$el.getBoundingClientRect();
      this.initX = rect.left + getWindowScrollLeft();
      this.initY = rect.top + getWindowScrollTop();
      this.barWidth = this.$el.offsetWidth;
      this.barHeight = this.$el.offsetHeight;
    },
    setValue: function setValue(event) {
      var handleValue;
      var pageX = event.touches ? event.touches[0].pageX : event.pageX;
      var pageY = event.touches ? event.touches[0].pageY : event.pageY;
      if (this.orientation === 'horizontal') {
        if (isRTL(this.$el)) {
          handleValue = (this.initX + this.barWidth - pageX) * 100 / this.barWidth;
        } else {
          handleValue = (pageX - this.initX) * 100 / this.barWidth;
        }
      } else {
        handleValue = (this.initY + this.barHeight - pageY) * 100 / this.barHeight;
      }
      var newValue = (this.max - this.min) * (handleValue / 100) + this.min;
      if (!this.step) {
        newValue = Math.floor(newValue);
      }
      this.updateModel(event, newValue);
    },
    clamp: function clamp(value, minValue, maxValue) {
      return Math.min(Math.max(value, minValue), maxValue);
    },
    getPrecision: function getPrecision(stepValue) {
      var stepString = stepValue.toString();
      if (stepString.includes('e-')) {
        return Number(stepString.split('e-')[1] || 0);
      }
      var dotIndex = stepString.indexOf('.');
      return dotIndex >= 0 ? stepString.length - dotIndex - 1 : 0;
    },
    roundToStep: function roundToStep(value, stepValue, minValue) {
      if (!stepValue) return value;
      var precision = this.getPrecision(stepValue);
      var rounded = Math.round((value - minValue) / stepValue) * stepValue + minValue;
      return Number(rounded.toFixed(precision));
    },
    updateModel: function updateModel(event, value) {
      var newValue = this.step ? this.roundToStep(value, this.step, this.min) : Math.round(value * 100) / 100;
      var modelValue;
      if (this.range) {
        modelValue = this.value ? _toConsumableArray(this.value) : [];
        var gap = Math.max((this.minStepsBetweenHandles || 0) * (this.step || 1), 0);
        if (this.handleIndex == 0) {
          var upperBound = modelValue[1] !== undefined ? modelValue[1] - gap : this.max;
          newValue = this.clamp(newValue, this.min, upperBound);
          modelValue[0] = newValue;
        } else {
          var lowerBound = modelValue[0] !== undefined ? modelValue[0] + gap : this.min;
          newValue = this.clamp(newValue, lowerBound, this.max);
          modelValue[1] = newValue;
        }
      } else {
        newValue = this.clamp(newValue, this.min, this.max);
        modelValue = newValue;
      }
      this.writeValue(modelValue, event);
      this.$emit('change', modelValue);
    },
    onDragStart: function onDragStart(event, index) {
      var _event$currentTarget, _event$currentTarget$, _input$focus;
      if (this.disabled || this.readonly) {
        return;
      }
      if (this.range && this.isHandleDisabled(index)) {
        return;
      }
      this.d_dragging = true;
      this.updateDomData();
      if (this.range && this.value[0] === this.max) {
        this.handleIndex = 0;
      } else {
        this.handleIndex = index;
      }
      var input = (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || (_event$currentTarget$ = _event$currentTarget.querySelector) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.call(_event$currentTarget, '.p-slider-input');
      input === null || input === void 0 || (_input$focus = input.focus) === null || _input$focus === void 0 || _input$focus.call(input);
    },
    onDrag: function onDrag(event) {
      if (this.d_dragging) {
        this.setValue(event);
      }
    },
    onDragEnd: function onDragEnd(event) {
      if (this.d_dragging) {
        this.d_dragging = false;
        this.$emit('slideend', {
          originalEvent: event,
          value: this.value
        });
      }
    },
    onBarClick: function onBarClick(event) {
      if (this.disabled || this.readonly) {
        return;
      }
      if (getAttribute(event.target, 'data-pc-section') !== 'handle') {
        this.updateDomData();
        this.setValue(event);
      }
    },
    onMouseDown: function onMouseDown(event, index) {
      this.bindDragListeners();
      this.onDragStart(event, index);
    },
    onInputChange: function onInputChange(event, index) {
      if (this.disabled || this.readonly) return;
      if (this.range && this.isHandleDisabled(index)) return;
      this.handleIndex = index;
      var newValue = parseFloat(event.target.value);
      if (Number.isNaN(newValue)) return;
      this.updateModel(event, newValue);
      this.$emit('slideend', {
        originalEvent: event,
        value: this.value
      });
    },
    onInputFocus: function onInputFocus(event, index) {
      this.d_focusedIndex = index;
    },
    onInputBlur: function onInputBlur(event, index) {
      var _this$formField$onBlu, _this$formField;
      if (this.d_focusedIndex === index) {
        this.d_focusedIndex = null;
      }
      (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField, event);
      this.$emit('slideend', {
        originalEvent: event,
        value: this.value
      });
    },
    bindDragListeners: function bindDragListeners() {
      if (!this.dragListener) {
        this.dragListener = this.onDrag.bind(this);
        document.addEventListener('mousemove', this.dragListener);
      }
      if (!this.dragEndListener) {
        this.dragEndListener = this.onDragEnd.bind(this);
        document.addEventListener('mouseup', this.dragEndListener);
      }
    },
    unbindDragListeners: function unbindDragListeners() {
      if (this.dragListener) {
        document.removeEventListener('mousemove', this.dragListener);
        this.dragListener = null;
      }
      if (this.dragEndListener) {
        document.removeEventListener('mouseup', this.dragEndListener);
        this.dragEndListener = null;
      }
    },
    isRange: function isRange() {
      return this.range;
    },
    isHorizontal: function isHorizontal() {
      return this.orientation === 'horizontal';
    },
    values: function values() {
      var _this$d_value3;
      if (this.range) {
        var _this$d_value$, _this$d_value, _this$d_value$2, _this$d_value2;
        return [(_this$d_value$ = (_this$d_value = this.d_value) === null || _this$d_value === void 0 ? void 0 : _this$d_value[0]) !== null && _this$d_value$ !== void 0 ? _this$d_value$ : this.min, (_this$d_value$2 = (_this$d_value2 = this.d_value) === null || _this$d_value2 === void 0 ? void 0 : _this$d_value2[1]) !== null && _this$d_value$2 !== void 0 ? _this$d_value$2 : this.max];
      }
      return [(_this$d_value3 = this.d_value) !== null && _this$d_value3 !== void 0 ? _this$d_value3 : this.min];
    },
    getHandleValue: function getHandleValue(index) {
      var _vals$index;
      var vals = this.values();
      return (_vals$index = vals[index]) !== null && _vals$index !== void 0 ? _vals$index : this.min;
    },
    isHandleDisabled: function isHandleDisabled(index) {
      if (this.disabled) return true;
      if (this.range) {
        if (index === 0 && this.disabledMinHandle) return true;
        if (index === 1 && this.disabledMaxHandle) return true;
      }
      return false;
    },
    getValuePercent: function getValuePercent(val) {
      var range = this.max - this.min;
      if (!range) return 0;
      return Math.min(Math.max((val - this.min) / range * 100, 0), 100);
    }
  },
  computed: {
    value: function value() {
      var _this$d_value6;
      if (this.range) {
        var _this$d_value$3, _this$d_value4, _this$d_value$4, _this$d_value5;
        return [(_this$d_value$3 = (_this$d_value4 = this.d_value) === null || _this$d_value4 === void 0 ? void 0 : _this$d_value4[0]) !== null && _this$d_value$3 !== void 0 ? _this$d_value$3 : this.min, (_this$d_value$4 = (_this$d_value5 = this.d_value) === null || _this$d_value5 === void 0 ? void 0 : _this$d_value5[1]) !== null && _this$d_value$4 !== void 0 ? _this$d_value$4 : this.max];
      }
      return (_this$d_value6 = this.d_value) !== null && _this$d_value6 !== void 0 ? _this$d_value6 : this.min;
    },
    horizontal: function horizontal() {
      return this.orientation === 'horizontal';
    },
    vertical: function vertical() {
      return this.orientation === 'vertical';
    },
    handlePosition: function handlePosition() {
      return this.getValuePercent(this.getHandleValue(0));
    },
    rangeStartPosition: function rangeStartPosition() {
      if (this.value && this.value[0] !== undefined) {
        return this.getValuePercent(this.value[0]);
      }
      return 0;
    },
    rangeEndPosition: function rangeEndPosition() {
      if (this.value && this.value.length === 2 && this.value[1] !== undefined) {
        return this.getValuePercent(this.value[1]);
      }
      return 100;
    },
    dataP: function dataP() {
      return cn(_defineProperty({}, this.orientation, this.orientation));
    }
  }
};

var _hoisted_1 = ["data-p", "data-orientation", "data-disabled", "data-invalid", "data-dragging"];
var _hoisted_2 = ["data-orientation", "data-disabled", "data-invalid", "data-dragging"];
var _hoisted_3 = ["data-p", "data-orientation", "data-disabled", "data-invalid", "data-dragging"];
var _hoisted_4 = ["data-p", "data-orientation", "data-disabled", "data-invalid", "data-dragging"];
var _hoisted_5 = ["id", "name", "min", "max", "step", "value", "disabled", "readonly", "tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
var _hoisted_6 = ["data-p", "data-orientation", "data-disabled", "data-invalid", "data-dragging"];
var _hoisted_7 = ["id", "name", "min", "max", "step", "value", "disabled", "readonly", "tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
var _hoisted_8 = ["data-p", "data-orientation", "data-disabled", "data-invalid", "data-dragging"];
var _hoisted_9 = ["name", "min", "max", "step", "value", "disabled", "readonly", "tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-labelledby", "aria-label", "aria-orientation"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
  var _ctx$step, _ctx$step2, _ctx$step3;
  return openBlock(), createElementBlock("div", mergeProps({
    "class": _ctx.cx('root'),
    style: _ctx.sx('root'),
    onClick: _cache[24] || (_cache[24] = function () {
      return $options.onBarClick && $options.onBarClick.apply($options, arguments);
    })
  }, _ctx.ptmi('root'), {
    "data-p": $options.dataP,
    "data-orientation": _ctx.orientation,
    "data-disabled": _ctx.disabled ? '' : undefined,
    "data-invalid": _ctx.$invalid ? '' : undefined,
    "data-dragging": $data.d_dragging ? '' : undefined
  }), [createElementVNode("div", mergeProps({
    "class": _ctx.cx('track'),
    style: _ctx.sx('track')
  }, _ctx.ptm('track'), {
    "data-orientation": _ctx.orientation,
    "data-disabled": _ctx.disabled ? '' : undefined,
    "data-invalid": _ctx.$invalid ? '' : undefined,
    "data-dragging": $data.d_dragging ? '' : undefined
  }), [createElementVNode("span", mergeProps({
    "class": _ctx.cx('range'),
    style: _ctx.sx('range')
  }, _ctx.ptm('range'), {
    "data-p": $options.dataP,
    "data-orientation": _ctx.orientation,
    "data-disabled": _ctx.disabled ? '' : undefined,
    "data-invalid": _ctx.$invalid ? '' : undefined,
    "data-dragging": $data.d_dragging ? '' : undefined
  }), null, 16, _hoisted_3)], 16, _hoisted_2), !_ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
    key: 0,
    "class": _ctx.cx('handle'),
    style: _ctx.sx('handle'),
    onTouchstartPassive: _cache[4] || (_cache[4] = function ($event) {
      return $options.onDragStart($event);
    }),
    onTouchmovePassive: _cache[5] || (_cache[5] = function ($event) {
      return $options.onDrag($event);
    }),
    onTouchend: _cache[6] || (_cache[6] = function ($event) {
      return $options.onDragEnd($event);
    }),
    onMousedown: _cache[7] || (_cache[7] = function ($event) {
      return $options.onMouseDown($event);
    })
  }, _ctx.ptm('handle'), {
    "data-p": $options.dataP,
    "data-index": 0,
    "data-orientation": _ctx.orientation,
    "data-disabled": _ctx.disabled ? '' : undefined,
    "data-invalid": _ctx.$invalid ? '' : undefined,
    "data-dragging": $data.d_dragging ? '' : undefined
  }), [createElementVNode("input", mergeProps({
    type: "range",
    "class": [_ctx.cx('input'), _ctx.inputClass],
    style: _ctx.inputStyle,
    id: _ctx.inputId,
    name: _ctx.name,
    min: _ctx.min,
    max: _ctx.max,
    step: (_ctx$step = _ctx.step) !== null && _ctx$step !== void 0 ? _ctx$step : 1,
    value: $options.getHandleValue(0),
    disabled: _ctx.disabled,
    readonly: _ctx.readonly,
    tabindex: _ctx.disabled ? -1 : _ctx.tabindex,
    "aria-valuemin": _ctx.min,
    "aria-valuenow": $options.getHandleValue(0),
    "aria-valuemax": _ctx.max,
    "aria-labelledby": _ctx.ariaLabelledby,
    "aria-label": _ctx.ariaLabel,
    "aria-orientation": _ctx.orientation,
    onInput: _cache[0] || (_cache[0] = function ($event) {
      return $options.onInputChange($event, 0);
    }),
    onChange: _cache[1] || (_cache[1] = function ($event) {
      return $options.onInputChange($event, 0);
    }),
    onFocus: _cache[2] || (_cache[2] = function ($event) {
      return $options.onInputFocus($event, 0);
    }),
    onBlur: _cache[3] || (_cache[3] = function ($event) {
      return $options.onInputBlur($event, 0);
    })
  }, _ctx.ptm('input')), null, 16, _hoisted_5)], 16, _hoisted_4)) : createCommentVNode("", true), _ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
    key: 1,
    "class": _ctx.cx('handle'),
    style: _ctx.sx('startHandler'),
    onTouchstartPassive: _cache[12] || (_cache[12] = function ($event) {
      return $options.onDragStart($event, 0);
    }),
    onTouchmovePassive: _cache[13] || (_cache[13] = function ($event) {
      return $options.onDrag($event);
    }),
    onTouchend: _cache[14] || (_cache[14] = function ($event) {
      return $options.onDragEnd($event);
    }),
    onMousedown: _cache[15] || (_cache[15] = function ($event) {
      return $options.onMouseDown($event, 0);
    })
  }, _ctx.ptm('startHandler'), {
    "data-p": $options.dataP,
    "data-index": 0,
    "data-orientation": _ctx.orientation,
    "data-disabled": $options.isHandleDisabled(0) ? '' : undefined,
    "data-invalid": _ctx.$invalid ? '' : undefined,
    "data-dragging": $data.d_dragging ? '' : undefined
  }), [createElementVNode("input", mergeProps({
    type: "range",
    "class": [_ctx.cx('input'), _ctx.inputClass],
    style: _ctx.inputStyle,
    id: _ctx.inputId,
    name: _ctx.name,
    min: _ctx.min,
    max: _ctx.max,
    step: (_ctx$step2 = _ctx.step) !== null && _ctx$step2 !== void 0 ? _ctx$step2 : 1,
    value: $options.getHandleValue(0),
    disabled: $options.isHandleDisabled(0),
    readonly: _ctx.readonly,
    tabindex: $options.isHandleDisabled(0) ? -1 : _ctx.tabindex,
    "aria-valuemin": _ctx.min,
    "aria-valuenow": $options.getHandleValue(0),
    "aria-valuemax": _ctx.max,
    "aria-labelledby": _ctx.ariaLabelledby,
    "aria-label": _ctx.ariaLabel,
    "aria-orientation": _ctx.orientation,
    onInput: _cache[8] || (_cache[8] = function ($event) {
      return $options.onInputChange($event, 0);
    }),
    onChange: _cache[9] || (_cache[9] = function ($event) {
      return $options.onInputChange($event, 0);
    }),
    onFocus: _cache[10] || (_cache[10] = function ($event) {
      return $options.onInputFocus($event, 0);
    }),
    onBlur: _cache[11] || (_cache[11] = function ($event) {
      return $options.onInputBlur($event, 0);
    })
  }, _ctx.ptm('input')), null, 16, _hoisted_7)], 16, _hoisted_6)) : createCommentVNode("", true), _ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
    key: 2,
    "class": _ctx.cx('handle'),
    style: _ctx.sx('endHandler'),
    onTouchstartPassive: _cache[20] || (_cache[20] = function ($event) {
      return $options.onDragStart($event, 1);
    }),
    onTouchmovePassive: _cache[21] || (_cache[21] = function ($event) {
      return $options.onDrag($event);
    }),
    onTouchend: _cache[22] || (_cache[22] = function ($event) {
      return $options.onDragEnd($event);
    }),
    onMousedown: _cache[23] || (_cache[23] = function ($event) {
      return $options.onMouseDown($event, 1);
    })
  }, _ctx.ptm('endHandler'), {
    "data-p": $options.dataP,
    "data-index": 1,
    "data-orientation": _ctx.orientation,
    "data-disabled": $options.isHandleDisabled(1) ? '' : undefined,
    "data-invalid": _ctx.$invalid ? '' : undefined,
    "data-dragging": $data.d_dragging ? '' : undefined
  }), [createElementVNode("input", mergeProps({
    type: "range",
    "class": [_ctx.cx('input'), _ctx.inputClass],
    style: _ctx.inputStyle,
    name: _ctx.name,
    min: _ctx.min,
    max: _ctx.max,
    step: (_ctx$step3 = _ctx.step) !== null && _ctx$step3 !== void 0 ? _ctx$step3 : 1,
    value: $options.getHandleValue(1),
    disabled: $options.isHandleDisabled(1),
    readonly: _ctx.readonly,
    tabindex: $options.isHandleDisabled(1) ? -1 : _ctx.tabindex,
    "aria-valuemin": _ctx.min,
    "aria-valuenow": $options.getHandleValue(1),
    "aria-valuemax": _ctx.max,
    "aria-labelledby": _ctx.ariaLabelledby,
    "aria-label": _ctx.ariaLabel,
    "aria-orientation": _ctx.orientation,
    onInput: _cache[16] || (_cache[16] = function ($event) {
      return $options.onInputChange($event, 1);
    }),
    onChange: _cache[17] || (_cache[17] = function ($event) {
      return $options.onInputChange($event, 1);
    }),
    onFocus: _cache[18] || (_cache[18] = function ($event) {
      return $options.onInputFocus($event, 1);
    }),
    onBlur: _cache[19] || (_cache[19] = function ($event) {
      return $options.onInputBlur($event, 1);
    })
  }, _ctx.ptm('input')), null, 16, _hoisted_9)], 16, _hoisted_8)) : createCommentVNode("", true)], 16, _hoisted_1);
}

script.render = render;

export { script as default };