vxe-pc-ui 4.2.13 → 4.2.15

package/lib/slider/src/slider.js

@@ -10,18 +10,91 @@ var _ui = require("../../ui");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = exports.default = (0, _vue.defineComponent)({
   name: 'VxeSlider',
-  props: {},
-  emits: [],
+  props: {
+    modelValue: [String, Number, Array],
+    vertical: Boolean,
+    max: {
+      type: [String, Number],
+      default: () => (0, _ui.getConfig)().slider.max
+    },
+    min: {
+      type: [String, Number],
+      default: () => (0, _ui.getConfig)().slider.min
+    },
+    step: {
+      type: [String, Number],
+      default: () => (0, _ui.getConfig)().slider.step
+    },
+    size: {
+      type: String,
+      default: () => (0, _ui.getConfig)().slider.size || (0, _ui.getConfig)().size
+    },
+    range: {
+      type: Boolean,
+      default: () => (0, _ui.getConfig)().slider.range
+    },
+    readonly: {
+      type: Boolean,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      default: null
+    }
+  },
+  emits: ['update:modelValue', 'change'],
   setup(props, context) {
     const {
       emit
     } = context;
+    const $xeForm = (0, _vue.inject)('$xeForm', null);
+    const formItemInfo = (0, _vue.inject)('xeFormItemInfo', null);
     const xID = _xeUtils.default.uniqueId();
+    const {
+      computeSize
+    } = (0, _ui.useSize)(props);
     const refElem = (0, _vue.ref)();
-    const reactData = (0, _vue.reactive)({});
+    const refBarElem = (0, _vue.ref)();
+    const refTrackElem = (0, _vue.ref)();
+    const refStartBtnElem = (0, _vue.ref)();
+    const refEndBtnElem = (0, _vue.ref)();
+    const reactData = (0, _vue.reactive)({
+      startValue: 0,
+      endValue: 0
+    });
     const refMaps = {
       refElem
     };
+    const computeFormReadonly = (0, _vue.computed)(() => {
+      const {
+        readonly
+      } = props;
+      if (readonly === null) {
+        if ($xeForm) {
+          return $xeForm.props.readonly;
+        }
+        return false;
+      }
+      return readonly;
+    });
+    const computeIsDisabled = (0, _vue.computed)(() => {
+      const {
+        disabled
+      } = props;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    });
+    const computeMaxNum = (0, _vue.computed)(() => {
+      return _xeUtils.default.toNumber(props.max || 0);
+    });
+    const computeMinNum = (0, _vue.computed)(() => {
+      return _xeUtils.default.toNumber(props.min || 0);
+    });
     const computeMaps = {};
     const $xeSlider = {
       xID,
@@ -31,6 +104,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     };
+    const emitModel = value => {
+      emit('update:modelValue', value);
+    };
     const dispatchEvent = (type, params, evnt) => {
       emit(type, (0, _ui.createEvent)(evnt, {
         $slider: $xeSlider
@@ -39,14 +115,165 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const collapsePaneMethods = {
       dispatchEvent
     };
+    const getStartPercent = startValue => {
+      const {
+        range
+      } = props;
+      const maxNum = computeMaxNum.value;
+      const minNum = computeMinNum.value;
+      return range ? _xeUtils.default.floor((startValue - minNum) / _xeUtils.default.toNumber(maxNum - minNum) * 100) : 0;
+    };
+    const getEndPercent = (startValue, endValue) => {
+      const {
+        range
+      } = props;
+      const maxNum = computeMaxNum.value;
+      const minNum = computeMinNum.value;
+      return _xeUtils.default.floor((endValue - (range ? startValue : 0) - minNum) / _xeUtils.default.toNumber(maxNum - minNum) * 100);
+    };
+    const updateModel = () => {
+      const {
+        modelValue
+      } = props;
+      if (_xeUtils.default.isArray(modelValue)) {
+        const [sVal, eVal] = _xeUtils.default.clone(modelValue, true).sort();
+        reactData.startValue = _xeUtils.default.floor(_xeUtils.default.toNumber(sVal || 0));
+        reactData.endValue = _xeUtils.default.floor(_xeUtils.default.toNumber(eVal || 0));
+      } else {
+        reactData.startValue = 0;
+        reactData.endValue = _xeUtils.default.floor(_xeUtils.default.toNumber(modelValue || 0));
+      }
+    };
+    const updateBarStyle = () => {
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const trackElem = refTrackElem.value;
+      const startBtnElem = refStartBtnElem.value;
+      const endBtnElem = refEndBtnElem.value;
+      let startPercent = 0;
+      let endPercent = 0;
+      if (startValue > endValue) {
+        startPercent = getStartPercent(endValue);
+        endPercent = getEndPercent(endValue, startValue);
+      } else {
+        startPercent = getStartPercent(startValue);
+        endPercent = getEndPercent(startValue, endValue);
+      }
+      if (trackElem) {
+        trackElem.style.left = `${startPercent}%`;
+        trackElem.style.width = `${endPercent}%`;
+      }
+      if (startBtnElem) {
+        startBtnElem.style.left = `${startPercent}%`;
+      }
+      if (endBtnElem) {
+        endBtnElem.style.left = `${_xeUtils.default.floor(startPercent + endPercent)}%`;
+      }
+    };
+    const changeEvent = evnt => {
+      const {
+        range
+      } = props;
+      const {
+        startValue,
+        endValue
+      } = reactData;
+      const value = range ? [startValue, endValue].sort() : endValue;
+      emitModel(value);
+      dispatchEvent('change', {
+        value
+      }, evnt);
+      // 自动更新校验状态
+      if ($xeForm && formItemInfo) {
+        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+      }
+    };
+    const handleMousedownEvent = (evnt, isEnd) => {
+      const formReadonly = computeFormReadonly.value;
+      const isDisabled = computeIsDisabled.value;
+      const maxNum = computeMaxNum.value;
+      const minNum = computeMinNum.value;
+      if (!(formReadonly || isDisabled)) {
+        evnt.preventDefault();
+        const domMousemove = document.onmousemove;
+        const domMouseup = document.onmouseup;
+        document.onmousemove = evnt => {
+          evnt.preventDefault();
+          const barElem = refBarElem.value;
+          if (barElem) {
+            const barRect = barElem.getBoundingClientRect();
+            const trackWidth = (evnt.clientX - barRect.left) / 914;
+            if (isEnd) {
+              reactData.endValue = _xeUtils.default.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum) + minNum)));
+            } else {
+              reactData.startValue = _xeUtils.default.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum))));
+            }
+          }
+          updateBarStyle();
+        };
+        document.onmouseup = evnt => {
+          document.onmousemove = domMousemove;
+          document.onmouseup = domMouseup;
+          changeEvent(evnt);
+          updateBarStyle();
+        };
+      }
+    };
+    const handleStartMousedownEvent = evnt => {
+      const endBtnElem = refEndBtnElem.value;
+      const startBtnElem = evnt.currentTarget;
+      handleMousedownEvent(evnt, endBtnElem ? endBtnElem.offsetLeft < startBtnElem.offsetLeft : false);
+    };
+    const handleEndMousedownEvent = evnt => {
+      const startBtnElem = refStartBtnElem.value;
+      const endBtnElem = evnt.currentTarget;
+      handleMousedownEvent(evnt, startBtnElem ? endBtnElem.offsetLeft > startBtnElem.offsetLeft : true);
+    };
     const collapsePanePrivateMethods = {};
     Object.assign($xeSlider, collapsePaneMethods, collapsePanePrivateMethods);
     const renderVN = () => {
+      const {
+        vertical,
+        range
+      } = props;
+      const vSize = computeSize.value;
+      const formReadonly = computeFormReadonly.value;
+      const isDisabled = computeIsDisabled.value;
       return (0, _vue.h)('div', {
         ref: refElem,
-        class: 'vxe-slider'
-      }, []);
+        class: ['vxe-slider', {
+          [`size--${vSize}`]: vSize,
+          'is--vertical': vertical,
+          'is--readonly': formReadonly,
+          'is--disabled': isDisabled
+        }]
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-slider--inner'
+      }, [(0, _vue.h)('div', {
+        ref: refBarElem,
+        class: 'vxe-slider--bar-wrapper'
+      }), (0, _vue.h)('div', {
+        ref: refTrackElem,
+        class: 'vxe-slider--bar-track'
+      }), formReadonly || !range ? (0, _ui.renderEmptyElement)($xeSlider) : (0, _vue.h)('div', {
+        ref: refStartBtnElem,
+        class: 'vxe-slider--bar-btn vxe-slider--start-btn',
+        onMousedown: handleStartMousedownEvent
+      }), formReadonly ? (0, _ui.renderEmptyElement)($xeSlider) : (0, _vue.h)('div', {
+        ref: refEndBtnElem,
+        class: 'vxe-slider--bar-btn vxe-slider--end-btn',
+        onMousedown: handleEndMousedownEvent
+      })])]);
     };
+    (0, _vue.watch)(() => props.modelValue, () => {
+      updateModel();
+    });
+    (0, _vue.onMounted)(() => {
+      updateBarStyle();
+    });
+    updateModel();
     $xeSlider.renderVN = renderVN;
     return $xeSlider;
   },

package/lib/slider/src/slider.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeSlider",props:{},emits:[],setup(e,t){const u=t["emit"];var r=_xeUtils.default.uniqueId();const i=(0,_vue.ref)();var s=(0,_vue.reactive)({});const a={refElem:i},n={},d={xID:r,props:e,context:t,reactData:s,getRefMaps:()=>a,getComputeMaps:()=>n};Object.assign(d,{dispatchEvent:(e,t,r)=>{u(e,(0,_ui.createEvent)(r,{$slider:d},t))}},{});return d.renderVN=()=>(0,_vue.h)("div",{ref:i,class:"vxe-slider"},[]),d},render(){return this.renderVN()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeSlider",props:{modelValue:[String,Number,Array],vertical:Boolean,max:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.max},min:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.min},step:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.step},size:{type:String,default:()=>(0,_ui.getConfig)().slider.size||(0,_ui.getConfig)().size},range:{type:Boolean,default:()=>(0,_ui.getConfig)().slider.range},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null}},emits:["update:modelValue","change"],setup(a,e){const r=e["emit"],i=(0,_vue.inject)("$xeForm",null),n=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();const o=(0,_ui.useSize)(a)["computeSize"],s=(0,_vue.ref)(),d=(0,_vue.ref)(),v=(0,_vue.ref)(),f=(0,_vue.ref)(),m=(0,_vue.ref)(),_=(0,_vue.reactive)({startValue:0,endValue:0}),u={refElem:s},c=(0,_vue.computed)(()=>{var e=a["readonly"];return null===e?!!i&&i.props.readonly:e}),p=(0,_vue.computed)(()=>{var e=a["disabled"];return null===e?!!i&&i.props.disabled:e}),x=(0,_vue.computed)(()=>_xeUtils.default.toNumber(a.max||0)),g=(0,_vue.computed)(()=>_xeUtils.default.toNumber(a.min||0)),l={},b={xID:t,props:a,context:e,reactData:_,getRefMaps:()=>u,getComputeMaps:()=>l},y=(e,t,u)=>{r(e,(0,_ui.createEvent)(u,{$slider:b},t))};t={dispatchEvent:y};const V=e=>{var t=a["range"],u=x.value,l=g.value;return t?_xeUtils.default.floor((e-l)/_xeUtils.default.toNumber(u-l)*100):0},U=(e,t)=>{var u=a["range"],l=x.value,r=g.value;return _xeUtils.default.floor((t-(u?e:0)-r)/_xeUtils.default.toNumber(l-r)*100)},h=()=>{var e,t,u=a["modelValue"];_xeUtils.default.isArray(u)?([e,t]=_xeUtils.default.clone(u,!0).sort(),_.startValue=_xeUtils.default.floor(_xeUtils.default.toNumber(e||0)),_.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(t||0))):(_.startValue=0,_.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(u||0)))},N=()=>{var{startValue:e,endValue:t}=_,u=v.value,l=f.value,r=m.value;let a=0,i=0;i=t<e?(a=V(t),U(t,e)):(a=V(e),U(e,t)),u&&(u.style.left=a+"%",u.style.width=i+"%"),l&&(l.style.left=a+"%"),r&&(r.style.left=_xeUtils.default.floor(a+i)+"%")},M=e=>{var t=a["range"],{startValue:u,endValue:l}=_,t=t?[u,l].sort():l;u=t,r("update:modelValue",u),y("change",{value:t},e),i&&n&&i.triggerItemEvent(e,n.itemConfig.field,t)},C=(e,u)=>{var t=c.value,l=p.value;const r=x.value,a=g.value;if(!t&&!l){e.preventDefault();const i=document.onmousemove,n=document.onmouseup;document.onmousemove=e=>{e.preventDefault();var t=d.value;t&&(t=t.getBoundingClientRect(),e=(e.clientX-t.left)/914,u?_.endValue=_xeUtils.default.floor(Math.max(a,Math.min(r,e*(r-a)+a))):_.startValue=_xeUtils.default.floor(Math.max(a,Math.min(r,e*(r-a))))),N()},document.onmouseup=e=>{document.onmousemove=i,document.onmouseup=n,M(e),N()}}},E=e=>{var t=m.value,u=e.currentTarget;C(e,!!t&&t.offsetLeft<u.offsetLeft)},S=e=>{var t=f.value,u=e.currentTarget;C(e,!t||u.offsetLeft>t.offsetLeft)};Object.assign(b,t,{});return(0,_vue.watch)(()=>a.modelValue,()=>{h()}),(0,_vue.onMounted)(()=>{N()}),h(),b.renderVN=()=>{var{vertical:e,range:t}=a,u=o.value,l=c.value,r=p.value;return(0,_vue.h)("div",{ref:s,class:["vxe-slider",{["size--"+u]:u,"is--vertical":e,"is--readonly":l,"is--disabled":r}]},[(0,_vue.h)("div",{class:"vxe-slider--inner"},[(0,_vue.h)("div",{ref:d,class:"vxe-slider--bar-wrapper"}),(0,_vue.h)("div",{ref:v,class:"vxe-slider--bar-track"}),l||!t?(0,_ui.renderEmptyElement)(b):(0,_vue.h)("div",{ref:f,class:"vxe-slider--bar-btn vxe-slider--start-btn",onMousedown:E}),l?(0,_ui.renderEmptyElement)(b):(0,_vue.h)("div",{ref:m,class:"vxe-slider--bar-btn vxe-slider--end-btn",onMousedown:S})])])},b},render(){return this.renderVN()}});

package/lib/slider/style/style.css

@@ -0,0 +1,143 @@
+.vxe-slider {
+  position: relative;
+  display: block;
+  padding: 0.5em 1em;
+}
+.vxe-slider.theme--primary .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-slider.theme--primary .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-slider.theme--primary .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-font-primary-darken-color);
+}
+.vxe-slider.theme--primary .vxe-slider--bar-btn {
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-slider.theme--success .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-status-success-color);
+}
+.vxe-slider.theme--success .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-status-success-lighten-color);
+}
+.vxe-slider.theme--success .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-status-success-darken-color);
+}
+.vxe-slider.theme--success .vxe-slider--bar-btn {
+  background-color: var(--vxe-ui-status-success-color);
+}
+.vxe-slider.theme--info .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-status-info-color);
+}
+.vxe-slider.theme--info .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-status-info-lighten-color);
+}
+.vxe-slider.theme--info .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-status-info-darken-color);
+}
+.vxe-slider.theme--info .vxe-slider--bar-btn {
+  background-color: var(--vxe-ui-status-info-color);
+}
+.vxe-slider.theme--warning .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-status-warning-color);
+}
+.vxe-slider.theme--warning .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-status-warning-lighten-color);
+}
+.vxe-slider.theme--warning .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-status-warning-darken-color);
+}
+.vxe-slider.theme--warning .vxe-slider--bar-btn {
+  background-color: var(--vxe-ui-status-warning-color);
+}
+.vxe-slider.theme--danger .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-status-danger-color);
+}
+.vxe-slider.theme--danger .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-status-danger-lighten-color);
+}
+.vxe-slider.theme--danger .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-status-danger-darken-color);
+}
+.vxe-slider.theme--danger .vxe-slider--bar-btn {
+  background-color: var(--vxe-ui-status-danger-color);
+}
+.vxe-slider.theme--error .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-status-error-color);
+}
+.vxe-slider.theme--error .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-status-error-lighten-color);
+}
+.vxe-slider.theme--error .vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-status-error-darken-color);
+}
+.vxe-slider.theme--error .vxe-slider--bar-btn {
+  background-color: var(--vxe-ui-status-error-color);
+}
+.vxe-slider.is--disabled .vxe-slider--bar-btn {
+  cursor: not-allowed;
+}
+.vxe-slider:not(.is--disabled) .vxe-slider--bar-wrapper,
+.vxe-slider:not(.is--disabled) .vxe-slider--inner {
+  cursor: pointer;
+}
+.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:hover {
+  transform: scale(1.2);
+}
+.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:active {
+  transform: scale(1.1);
+}
+.vxe-slider.is--readonly .vxe-slider--bar-wrapper,
+.vxe-slider.is--readonly .vxe-slider--inner {
+  cursor: default;
+}
+
+.vxe-slider--inner {
+  position: relative;
+}
+
+.vxe-slider--bar-wrapper {
+  background-color: #e4e7ed;
+}
+
+.vxe-slider--bar-track {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-slider--bar-track:hover {
+  background-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-slider--bar-track:active {
+  background-color: var(--vxe-ui-font-primary-darken-color);
+}
+
+.vxe-slider--bar-wrapper,
+.vxe-slider--bar-track {
+  height: 0.3em;
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+
+.vxe-slider--bar-btn {
+  position: absolute;
+  width: 0.9em;
+  height: 0.9em;
+  top: -0.3em;
+  border-radius: 50%;
+  border: 0.15em solid var(--vxe-ui-font-primary-color);
+  background-color: #fff;
+  cursor: pointer;
+  z-index: 1;
+  transition: transform 0.1s ease-in-out;
+}
+
+.vxe-slider--start-btn {
+  left: -0.45em;
+}
+
+.vxe-slider--end-btn {
+  right: -0.45em;
+}

package/lib/slider/style/style.min.css

@@ -0,0 +1 @@
+.vxe-slider{position:relative;display:block;padding:.5em 1em}.vxe-slider.theme--primary .vxe-slider--bar-track{background-color:var(--vxe-ui-font-primary-color)}.vxe-slider.theme--primary .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-slider.theme--primary .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-slider.theme--primary .vxe-slider--bar-btn{background-color:var(--vxe-ui-font-primary-color)}.vxe-slider.theme--success .vxe-slider--bar-track{background-color:var(--vxe-ui-status-success-color)}.vxe-slider.theme--success .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-success-lighten-color)}.vxe-slider.theme--success .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-success-darken-color)}.vxe-slider.theme--success .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-success-color)}.vxe-slider.theme--info .vxe-slider--bar-track{background-color:var(--vxe-ui-status-info-color)}.vxe-slider.theme--info .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-info-lighten-color)}.vxe-slider.theme--info .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-info-darken-color)}.vxe-slider.theme--info .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-info-color)}.vxe-slider.theme--warning .vxe-slider--bar-track{background-color:var(--vxe-ui-status-warning-color)}.vxe-slider.theme--warning .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-slider.theme--warning .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-warning-darken-color)}.vxe-slider.theme--warning .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-warning-color)}.vxe-slider.theme--danger .vxe-slider--bar-track{background-color:var(--vxe-ui-status-danger-color)}.vxe-slider.theme--danger .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-slider.theme--danger .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-danger-darken-color)}.vxe-slider.theme--danger .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-danger-color)}.vxe-slider.theme--error .vxe-slider--bar-track{background-color:var(--vxe-ui-status-error-color)}.vxe-slider.theme--error .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-error-lighten-color)}.vxe-slider.theme--error .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-error-darken-color)}.vxe-slider.theme--error .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-error-color)}.vxe-slider.is--disabled .vxe-slider--bar-btn{cursor:not-allowed}.vxe-slider:not(.is--disabled) .vxe-slider--bar-wrapper,.vxe-slider:not(.is--disabled) .vxe-slider--inner{cursor:pointer}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:hover{transform:scale(1.2)}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:active{transform:scale(1.1)}.vxe-slider.is--readonly .vxe-slider--bar-wrapper,.vxe-slider.is--readonly .vxe-slider--inner{cursor:default}.vxe-slider--inner{position:relative}.vxe-slider--bar-wrapper{background-color:#e4e7ed}.vxe-slider--bar-track{position:absolute;left:0;top:0;z-index:1;background-color:var(--vxe-ui-font-primary-color)}.vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-slider--bar-track:active{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-slider--bar-track,.vxe-slider--bar-wrapper{height:.3em;border-radius:var(--vxe-ui-base-border-radius)}.vxe-slider--bar-btn{position:absolute;width:.9em;height:.9em;top:-.3em;border-radius:50%;border:.15em solid var(--vxe-ui-font-primary-color);background-color:#fff;cursor:pointer;z-index:1;transition:transform .1s ease-in-out}.vxe-slider--start-btn{left:-.45em}.vxe-slider--end-btn{right:-.45em}