vuetify 3.0.0-beta.9 → 3.0.1

package/lib/components/VSlider/VSliderThumb.mjs

@@ -1,15 +1,13 @@
 import { vShow as _vShow, withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 // Styles
-import "./VSliderThumb.css"; // Components
+import "./VSliderThumb.css";
 
+// Components
 import { VScaleTransition } from "../transitions/index.mjs";
 import { VSliderSymbol } from "./slider.mjs"; // Directives
-
 import Ripple from "../../directives/ripple/index.mjs"; // Composables
-
 import { useElevation } from "../../composables/elevation.mjs";
 import { useTextColor } from "../../composables/color.mjs"; // Utilities
-
 import { computed, inject } from 'vue';
 import { convertToUnit, defineComponent, keyValues, useRender } from "../../util/index.mjs";
 export const VSliderThumb = defineComponent({
@@ -39,7 +37,6 @@ export const VSliderThumb = defineComponent({
   emits: {
     'update:modelValue': v => true
   },
-
   setup(props, _ref) {
     let {
       slots,
@@ -80,15 +77,11 @@ export const VSliderThumb = defineComponent({
     const multipliers = computed(() => {
       if (step.value) return [1, 2, 3];else return [1, 5, 10];
     });
-
     function parseKeydown(e, value) {
       if (!relevantKeys.includes(e.key)) return;
       e.preventDefault();
-
       const _step = step.value || 0.1;
-
       const steps = (props.max - props.min) / _step;
-
       if ([left, right, down, up].includes(e.key)) {
         const increase = isReversed.value ? [left, up] : [right, up];
         const direction = increase.includes(e.key) ? 1 : -1;
@@ -102,18 +95,14 @@ export const VSliderThumb = defineComponent({
         const direction = e.key === pagedown ? 1 : -1;
         value = value - direction * _step * (steps > 100 ? steps / 10 : 10);
       }
-
       return Math.max(props.min, Math.min(props.max, value));
     }
-
     function onKeydown(e) {
       const newValue = parseKeydown(e, props.modelValue);
       newValue != null && emit('update:modelValue', newValue);
     }
-
     useRender(() => {
-      var _slots$thumbLabel, _slots$thumbLabel2;
-
+      var _slots$thumbLabel;
       const positionPercentage = convertToUnit(vertical.value ? 100 - props.position : props.position, '%');
       const inset = vertical.value ? 'block' : 'inline';
       const {
@@ -139,7 +128,8 @@ export const VSliderThumb = defineComponent({
         "onKeydown": !readonly.value ? onKeydown : undefined
       }, [_createVNode("div", {
         "class": ['v-slider-thumb__surface', textColorClasses.value, elevationClasses.value],
-        "style": { ...textColorStyles.value
+        "style": {
+          ...textColorStyles.value
         }
       }, null), _withDirectives(_createVNode("div", {
         "class": ['v-slider-thumb__ripple', textColorClasses.value],
@@ -154,13 +144,12 @@ export const VSliderThumb = defineComponent({
           "class": "v-slider-thumb__label-container"
         }, [_createVNode("div", {
           "class": ['v-slider-thumb__label']
-        }, [_createVNode("div", null, [(_slots$thumbLabel = (_slots$thumbLabel2 = slots['thumb-label']) == null ? void 0 : _slots$thumbLabel2.call(slots, {
+        }, [_createVNode("div", null, [((_slots$thumbLabel = slots['thumb-label']) == null ? void 0 : _slots$thumbLabel.call(slots, {
           modelValue: props.modelValue
-        })) != null ? _slots$thumbLabel : props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[_vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
+        })) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)])])]), [[_vShow, thumbLabel.value && props.focused || thumbLabel.value === 'always']])]
       })]);
     });
     return {};
   }
-
 });
 //# sourceMappingURL=VSliderThumb.mjs.map

package/lib/components/VSlider/VSliderThumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSliderThumb.mjs","names":["VScaleTransition","VSliderSymbol","Ripple","useElevation","useTextColor","computed","inject","convertToUnit","defineComponent","keyValues","useRender","VSliderThumb","name","directives","props","focused","Boolean","max","type","Number","required","min","modelValue","position","emits","v","setup","slots","emit","slider","Error","thumbColor","step","vertical","disabled","thumbSize","thumbLabel","direction","readonly","elevation","isReversed","horizontalDirection","mousePressed","decimals","textColorClasses","textColorStyles","pageup","pagedown","end","home","left","right","down","up","relevantKeys","multipliers","value","parseKeydown","e","includes","key","preventDefault","_step","steps","increase","multiplier","shiftKey","ctrlKey","Math","onKeydown","newValue","positionPercentage","inset","elevationClasses","undefined","toFixed"],"sources":["../../../src/components/VSlider/VSliderThumb.tsx"],"sourcesContent":["// Styles\nimport './VSliderThumb.sass'\n\n// Components\nimport { VScaleTransition } from '../transitions'\nimport { VSliderSymbol } from './slider'\n\n// Directives\nimport Ripple from '@/directives/ripple'\n\n// Composables\nimport { useElevation } from '@/composables/elevation'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, defineComponent, keyValues, useRender } from '@/util'\n\nexport const VSliderThumb = defineComponent({\n  name: 'VSliderThumb',\n\n  directives: { Ripple },\n\n  props: {\n    focused: Boolean,\n    max: {\n      type: Number,\n      required: true,\n    },\n    min: {\n      type: Number,\n      required: true,\n    },\n    modelValue: {\n      type: Number,\n      required: true,\n    },\n    position: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: {\n    'update:modelValue': (v: number) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider')\n\n    const {\n      thumbColor,\n      step,\n      vertical,\n      disabled,\n      thumbSize,\n      thumbLabel,\n      direction,\n      readonly,\n      elevation,\n      isReversed,\n      horizontalDirection,\n      mousePressed,\n      decimals,\n    } = slider\n\n    const { textColorClasses, textColorStyles } = useTextColor(thumbColor)\n\n    const { pageup, pagedown, end, home, left, right, down, up } = keyValues\n    const relevantKeys = [pageup, pagedown, end, home, left, right, down, up]\n\n    const multipliers = computed(() => {\n      if (step.value) return [1, 2, 3]\n      else return [1, 5, 10]\n    })\n\n    function parseKeydown (e: KeyboardEvent, value: number) {\n      if (!relevantKeys.includes(e.key)) return\n\n      e.preventDefault()\n\n      const _step = step.value || 0.1\n      const steps = (props.max - props.min) / _step\n      if ([left, right, down, up].includes(e.key)) {\n        const increase = isReversed.value ? [left, up] : [right, up]\n        const direction = increase.includes(e.key) ? 1 : -1\n        const multiplier = e.shiftKey ? 2 : (e.ctrlKey ? 1 : 0)\n\n        value = value + (direction * _step * multipliers.value[multiplier])\n      } else if (e.key === home) {\n        value = props.min\n      } else if (e.key === end) {\n        value = props.max\n      } else {\n        const direction = e.key === pagedown ? 1 : -1\n        value = value - (direction * _step * (steps > 100 ? steps / 10 : 10))\n      }\n\n      return Math.max(props.min, Math.min(props.max, value))\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      const newValue = parseKeydown(e, props.modelValue)\n\n      newValue != null && emit('update:modelValue', newValue)\n    }\n\n    useRender(() => {\n      const positionPercentage = convertToUnit(vertical.value ? 100 - props.position : props.position, '%')\n      const inset = vertical.value ? 'block' : 'inline'\n      const { elevationClasses } = useElevation(computed(() => !disabled.value ? elevation.value : undefined))\n\n      return (\n        <div\n          class={[\n            'v-slider-thumb',\n            {\n              'v-slider-thumb--focused': props.focused,\n              'v-slider-thumb--pressed': props.focused && mousePressed.value,\n            },\n          ]}\n          style={{\n            [`inset-${inset}-start`]: `calc(${positionPercentage} - var(--v-slider-thumb-size) / 2)`,\n            '--v-slider-thumb-size': convertToUnit(thumbSize.value),\n            direction: !vertical.value ? horizontalDirection.value : undefined,\n          }}\n          role=\"slider\"\n          tabindex={ disabled.value ? -1 : 0 }\n          aria-valuemin={ props.min }\n          aria-valuemax={ props.max }\n          aria-valuenow={ props.modelValue }\n          aria-readonly={ readonly.value }\n          aria-orientation={ direction.value }\n          onKeydown={ !readonly.value ? onKeydown : undefined }\n        >\n          <div\n            class={[\n              'v-slider-thumb__surface',\n              textColorClasses.value,\n              elevationClasses.value,\n            ]}\n            style={{\n              ...textColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-thumb__ripple',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n            v-ripple={[true, null, ['circle', 'center']]}\n          />\n          <VScaleTransition origin=\"bottom center\">\n            <div\n              class=\"v-slider-thumb__label-container\"\n              v-show={ (thumbLabel.value && props.focused) || thumbLabel.value === 'always' }\n            >\n              <div\n                class={[\n                  'v-slider-thumb__label',\n                ]}\n              >\n                <div>\n                  { slots['thumb-label']?.({ modelValue: props.modelValue }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1) }\n                </div>\n              </div>\n            </div>\n          </VScaleTransition>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSliderThumb = InstanceType<typeof VSliderThumb>\n"],"mappings":"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"}
+{"version":3,"file":"VSliderThumb.mjs","names":["VScaleTransition","VSliderSymbol","Ripple","useElevation","useTextColor","computed","inject","convertToUnit","defineComponent","keyValues","useRender","VSliderThumb","name","directives","props","focused","Boolean","max","type","Number","required","min","modelValue","position","emits","v","setup","slots","emit","slider","Error","thumbColor","step","vertical","disabled","thumbSize","thumbLabel","direction","readonly","elevation","isReversed","horizontalDirection","mousePressed","decimals","textColorClasses","textColorStyles","pageup","pagedown","end","home","left","right","down","up","relevantKeys","multipliers","value","parseKeydown","e","includes","key","preventDefault","_step","steps","increase","multiplier","shiftKey","ctrlKey","Math","onKeydown","newValue","positionPercentage","inset","elevationClasses","undefined","toFixed"],"sources":["../../../src/components/VSlider/VSliderThumb.tsx"],"sourcesContent":["// Styles\nimport './VSliderThumb.sass'\n\n// Components\nimport { VScaleTransition } from '../transitions'\nimport { VSliderSymbol } from './slider'\n\n// Directives\nimport Ripple from '@/directives/ripple'\n\n// Composables\nimport { useElevation } from '@/composables/elevation'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, defineComponent, keyValues, useRender } from '@/util'\n\nexport const VSliderThumb = defineComponent({\n  name: 'VSliderThumb',\n\n  directives: { Ripple },\n\n  props: {\n    focused: Boolean,\n    max: {\n      type: Number,\n      required: true,\n    },\n    min: {\n      type: Number,\n      required: true,\n    },\n    modelValue: {\n      type: Number,\n      required: true,\n    },\n    position: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: {\n    'update:modelValue': (v: number) => true,\n  },\n\n  setup (props, { slots, emit }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider')\n\n    const {\n      thumbColor,\n      step,\n      vertical,\n      disabled,\n      thumbSize,\n      thumbLabel,\n      direction,\n      readonly,\n      elevation,\n      isReversed,\n      horizontalDirection,\n      mousePressed,\n      decimals,\n    } = slider\n\n    const { textColorClasses, textColorStyles } = useTextColor(thumbColor)\n\n    const { pageup, pagedown, end, home, left, right, down, up } = keyValues\n    const relevantKeys = [pageup, pagedown, end, home, left, right, down, up]\n\n    const multipliers = computed(() => {\n      if (step.value) return [1, 2, 3]\n      else return [1, 5, 10]\n    })\n\n    function parseKeydown (e: KeyboardEvent, value: number) {\n      if (!relevantKeys.includes(e.key)) return\n\n      e.preventDefault()\n\n      const _step = step.value || 0.1\n      const steps = (props.max - props.min) / _step\n      if ([left, right, down, up].includes(e.key)) {\n        const increase = isReversed.value ? [left, up] : [right, up]\n        const direction = increase.includes(e.key) ? 1 : -1\n        const multiplier = e.shiftKey ? 2 : (e.ctrlKey ? 1 : 0)\n\n        value = value + (direction * _step * multipliers.value[multiplier])\n      } else if (e.key === home) {\n        value = props.min\n      } else if (e.key === end) {\n        value = props.max\n      } else {\n        const direction = e.key === pagedown ? 1 : -1\n        value = value - (direction * _step * (steps > 100 ? steps / 10 : 10))\n      }\n\n      return Math.max(props.min, Math.min(props.max, value))\n    }\n\n    function onKeydown (e: KeyboardEvent) {\n      const newValue = parseKeydown(e, props.modelValue)\n\n      newValue != null && emit('update:modelValue', newValue)\n    }\n\n    useRender(() => {\n      const positionPercentage = convertToUnit(vertical.value ? 100 - props.position : props.position, '%')\n      const inset = vertical.value ? 'block' : 'inline'\n      const { elevationClasses } = useElevation(computed(() => !disabled.value ? elevation.value : undefined))\n\n      return (\n        <div\n          class={[\n            'v-slider-thumb',\n            {\n              'v-slider-thumb--focused': props.focused,\n              'v-slider-thumb--pressed': props.focused && mousePressed.value,\n            },\n          ]}\n          style={{\n            [`inset-${inset}-start`]: `calc(${positionPercentage} - var(--v-slider-thumb-size) / 2)`,\n            '--v-slider-thumb-size': convertToUnit(thumbSize.value),\n            direction: !vertical.value ? horizontalDirection.value : undefined,\n          }}\n          role=\"slider\"\n          tabindex={ disabled.value ? -1 : 0 }\n          aria-valuemin={ props.min }\n          aria-valuemax={ props.max }\n          aria-valuenow={ props.modelValue }\n          aria-readonly={ readonly.value }\n          aria-orientation={ direction.value }\n          onKeydown={ !readonly.value ? onKeydown : undefined }\n        >\n          <div\n            class={[\n              'v-slider-thumb__surface',\n              textColorClasses.value,\n              elevationClasses.value,\n            ]}\n            style={{\n              ...textColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-thumb__ripple',\n              textColorClasses.value,\n            ]}\n            style={ textColorStyles.value }\n            v-ripple={[true, null, ['circle', 'center']]}\n          />\n          <VScaleTransition origin=\"bottom center\">\n            <div\n              class=\"v-slider-thumb__label-container\"\n              v-show={ (thumbLabel.value && props.focused) || thumbLabel.value === 'always' }\n            >\n              <div\n                class={[\n                  'v-slider-thumb__label',\n                ]}\n              >\n                <div>\n                  { slots['thumb-label']?.({ modelValue: props.modelValue }) ?? props.modelValue.toFixed(step.value ? decimals.value : 1) }\n                </div>\n              </div>\n            </div>\n          </VScaleTransition>\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSliderThumb = InstanceType<typeof VSliderThumb>\n"],"mappings":"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"}

package/lib/components/VSlider/VSliderThumb.sass

@@ -7,6 +7,7 @@
 
 // Theme
 .v-slider-thumb
+  touch-action: none
   color: rgb(var(--v-theme-surface-variant))
 
   .v-input--error:not(.v-input--disabled) &
@@ -126,13 +127,10 @@
       left: -$slider-thumb-label-wedge-size
 
 // Modifiers
-.v-slider-thumb--focused, .v-slider-thumb:hover
-  .v-slider-thumb__surface::before
-    transform: scale(2)
-
 .v-slider-thumb--focused
   .v-slider-thumb__surface::before
-      opacity: $slider-thumb-focus-opacity
+    transform: scale(2)
+    opacity: $slider-thumb-focus-opacity
 
 .v-slider-thumb--pressed
   transition: none
@@ -140,6 +138,11 @@
   .v-slider-thumb__surface::before
     opacity: $slider-thumb-pressed-opacity
 
-.v-slider-thumb:hover:not(.v-slider-thumb--focused)
-  .v-slider-thumb__surface::before
-    opacity: $slider-thumb-hover-opacity
+@media (hover: hover)
+  .v-slider-thumb:hover
+    .v-slider-thumb__surface::before
+      transform: scale(2)
+
+  .v-slider-thumb:hover:not(.v-slider-thumb--focused)
+    .v-slider-thumb__surface::before
+      opacity: $slider-thumb-hover-opacity

package/lib/components/VSlider/VSliderTrack.css

@@ -44,16 +44,16 @@
   height: var(--v-slider-tick-size);
   transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2));
 }
-.v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick:first-child .v-slider-track__tick-label {
+.v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick--first .v-slider-track__tick-label {
   transform: none;
 }
-.v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick:first-child .v-slider-track__tick-label {
+.v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick--first .v-slider-track__tick-label {
   transform: translateX(100%);
 }
-.v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick:last-child .v-slider-track__tick-label {
+.v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider-track__tick--last .v-slider-track__tick-label {
   transform: translateX(-100%);
 }
-.v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick:last-child .v-slider-track__tick-label {
+.v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider-track__tick--last .v-slider-track__tick-label {
   transform: none;
 }
 
@@ -82,33 +82,33 @@
 .v-slider.v-input--horizontal .v-slider-track__tick.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick {
   transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2));
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:first-child {
+.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
+  margin-top: calc(var(--v-slider-track-size) / 2 + 8px);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
+  transform: translateX(-50%);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
+  transform: translateX(50%);
+}
+.v-slider.v-input--horizontal .v-slider-track__tick--first {
   margin-inline-start: calc(var(--v-slider-tick-size) + 1px);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label {
+.v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label {
   transform: translateX(0%);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick:first-child .v-slider-track__tick-label {
+.v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label {
   transform: translateX(0%);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:last-child {
+.v-slider.v-input--horizontal .v-slider-track__tick--last {
   margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label {
+.v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label {
   transform: translateX(-100%);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick:last-child .v-slider-track__tick-label {
+.v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label {
   transform: translateX(100%);
 }
-.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
-  margin-top: calc(var(--v-slider-track-size) / 2 + 8px);
-}
-.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label.v-locale--is-ltr, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
-  transform: translateX(-50%);
-}
-.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
-  transform: translateX(50%);
-}
 
 .v-slider.v-input--vertical .v-slider-track {
   height: 100%;
@@ -133,7 +133,7 @@
 .v-slider.v-input--vertical .v-slider-track__tick.v-locale--is-rtl, .v-locale--is-rtl .v-slider.v-input--vertical .v-slider-track__tick {
   transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2));
 }
-.v-slider.v-input--vertical .v-slider-track__tick:last-child {
+.v-slider.v-input--vertical .v-slider-track__tick--last {
   bottom: calc(0% + var(--v-slider-tick-size) + 1px);
 }
 .v-slider.v-input--vertical .v-slider-track__tick .v-slider-track__tick-label {

package/lib/components/VSlider/VSliderTrack.mjs

@@ -1,12 +1,11 @@
 import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VSliderTrack.css"; // Components
+import "./VSliderTrack.css";
 
+// Components
 import { VSliderSymbol } from "./slider.mjs"; // Composables
-
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { useRounded } from "../../composables/rounded.mjs"; // Utilities
-
 import { computed, inject } from 'vue';
 import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs";
 export const VSliderTrack = defineComponent({
@@ -22,7 +21,6 @@ export const VSliderTrack = defineComponent({
     }
   },
   emits: {},
-
   setup(props, _ref) {
     let {
       slots
@@ -39,7 +37,9 @@ export const VSliderTrack = defineComponent({
       trackColor,
       trackFillColor,
       trackSize,
-      vertical
+      vertical,
+      min,
+      max
     } = slider;
     const {
       roundedClasses
@@ -70,24 +70,25 @@ export const VSliderTrack = defineComponent({
     const computedTicks = computed(() => {
       const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value;
       return ticks.map((tick, index) => {
-        var _slots$tickLabel, _slots$tickLabel2;
-
+        var _slots$tickLabel;
         const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start';
-        const directionValue = tick.position > 0 && tick.position < 100 ? convertToUnit(tick.position, '%') : undefined;
+        const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined;
         return _createVNode("div", {
           "key": tick.value,
           "class": ['v-slider-track__tick', {
-            'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop
+            'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,
+            'v-slider-track__tick--first': tick.value === min.value,
+            'v-slider-track__tick--last': tick.value === max.value
           }],
           "style": {
             [directionProperty]: directionValue
           }
         }, [(tick.label || slots['tick-label']) && _createVNode("div", {
           "class": "v-slider-track__tick-label"
-        }, [(_slots$tickLabel = (_slots$tickLabel2 = slots['tick-label']) == null ? void 0 : _slots$tickLabel2.call(slots, {
+        }, [((_slots$tickLabel = slots['tick-label']) == null ? void 0 : _slots$tickLabel.call(slots, {
           tick,
           index
-        })) != null ? _slots$tickLabel : tick.label])]);
+        })) ?? tick.label])]);
       });
     });
     useRender(() => {
@@ -102,12 +103,14 @@ export const VSliderTrack = defineComponent({
         "class": ['v-slider-track__background', trackColorClasses.value, {
           'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
         }],
-        "style": { ...backgroundStyles.value,
+        "style": {
+          ...backgroundStyles.value,
           ...trackColorStyles.value
         }
       }, null), _createVNode("div", {
         "class": ['v-slider-track__fill', trackFillColorClasses.value],
-        "style": { ...trackFillStyles.value,
+        "style": {
+          ...trackFillStyles.value,
           ...trackFillColorStyles.value
         }
       }, null), showTicks.value && _createVNode("div", {
@@ -118,6 +121,5 @@ export const VSliderTrack = defineComponent({
     });
     return {};
   }
-
 });
 //# sourceMappingURL=VSliderTrack.mjs.map

package/lib/components/VSlider/VSliderTrack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VSliderTrack.mjs","names":["VSliderSymbol","useBackgroundColor","useRounded","computed","inject","convertToUnit","defineComponent","useRender","VSliderTrack","name","props","start","type","Number","required","stop","emits","setup","slots","slider","Error","color","horizontalDirection","parsedTicks","rounded","showTicks","tickSize","trackColor","trackFillColor","trackSize","vertical","roundedClasses","backgroundColorClasses","trackFillColorClasses","backgroundColorStyles","trackFillColorStyles","trackColorClasses","trackColorStyles","startDir","value","endDir","backgroundStyles","trackFillWidth","trackFillStyles","computedTicks","ticks","slice","reverse","map","tick","index","directionProperty","directionValue","position","undefined","label","direction"],"sources":["../../../src/components/VSlider/VSliderTrack.tsx"],"sourcesContent":["// Styles\nimport './VSliderTrack.sass'\n\n// Components\nimport { VSliderSymbol } from './slider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { useRounded } from '@/composables/rounded'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\nexport const VSliderTrack = defineComponent({\n  name: 'VSliderTrack',\n\n  props: {\n    start: {\n      type: Number,\n      required: true,\n    },\n    stop: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: {},\n\n  setup (props, { slots }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider')\n\n    const {\n      color,\n      horizontalDirection,\n      parsedTicks,\n      rounded,\n      showTicks,\n      tickSize,\n      trackColor,\n      trackFillColor,\n      trackSize,\n      vertical,\n    } = slider\n\n    const { roundedClasses } = useRounded(rounded)\n\n    const {\n      backgroundColorClasses: trackFillColorClasses,\n      backgroundColorStyles: trackFillColorStyles,\n    } = useBackgroundColor(trackFillColor)\n\n    const {\n      backgroundColorClasses: trackColorClasses,\n      backgroundColorStyles: trackColorStyles,\n    } = useBackgroundColor(trackColor)\n\n    const startDir = computed(() => `inset-${vertical.value ? 'block-end' : 'inline-start'}`)\n    const endDir = computed(() => vertical.value ? 'height' : 'width')\n\n    const backgroundStyles = computed(() => {\n      return {\n        [startDir.value]: '0%',\n        [endDir.value]: '100%',\n      }\n    })\n\n    const trackFillWidth = computed(() => props.stop - props.start)\n\n    const trackFillStyles = computed(() => {\n      return {\n        [startDir.value]: convertToUnit(props.start, '%'),\n        [endDir.value]: convertToUnit(trackFillWidth.value, '%'),\n      }\n    })\n\n    const computedTicks = computed(() => {\n      const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value\n\n      return ticks.map((tick, index) => {\n        const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start'\n        const directionValue = (tick.position > 0 && tick.position < 100) ? convertToUnit(tick.position, '%') : undefined\n        return (\n          <div\n            key={ tick.value }\n            class={[\n              'v-slider-track__tick',\n              {\n                'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,\n              },\n            ]}\n            style={{ [directionProperty]: directionValue }}\n          >\n            {\n              (tick.label || slots['tick-label']) && (\n                <div class=\"v-slider-track__tick-label\">\n                  { slots['tick-label']?.({ tick, index }) ?? tick.label }\n                </div>\n              )\n            }\n          </div>\n        )\n      })\n    })\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            'v-slider-track',\n            roundedClasses.value,\n          ]}\n          style={{\n            '--v-slider-track-size': convertToUnit(trackSize.value),\n            '--v-slider-tick-size': convertToUnit(tickSize.value),\n            direction: !vertical.value ? horizontalDirection.value : undefined,\n          }}\n        >\n          <div\n            class={[\n              'v-slider-track__background',\n              trackColorClasses.value,\n              {\n                'v-slider-track__background--opacity': !!color.value || !trackFillColor.value,\n              },\n            ]}\n            style={{\n              ...backgroundStyles.value,\n              ...trackColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-track__fill',\n              trackFillColorClasses.value,\n            ]}\n            style={{\n              ...trackFillStyles.value,\n              ...trackFillColorStyles.value,\n            }}\n          />\n\n          { showTicks.value && (\n            <div\n              class={[\n                'v-slider-track__ticks',\n                {\n                  'v-slider-track__ticks--always-show': showTicks.value === 'always',\n                },\n              ]}\n            >\n              { computedTicks.value }\n            </div>\n          ) }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSliderTrack = InstanceType<typeof VSliderTrack>\n"],"mappings":";AAAA;AACA,4B,CAEA;;SACSA,a,wBAET;;SACSC,kB;SACAC,U,yCAET;;AACA,SAASC,QAAT,EAAmBC,MAAnB,QAAiC,KAAjC;SACSC,a,EAAeC,e,EAAiBC,S;AAEzC,OAAO,MAAMC,YAAY,GAAGF,eAAe,CAAC;EAC1CG,IAAI,EAAE,cADoC;EAG1CC,KAAK,EAAE;IACLC,KAAK,EAAE;MACLC,IAAI,EAAEC,MADD;MAELC,QAAQ,EAAE;IAFL,CADF;IAKLC,IAAI,EAAE;MACJH,IAAI,EAAEC,MADF;MAEJC,QAAQ,EAAE;IAFN;EALD,CAHmC;EAc1CE,KAAK,EAAE,EAdmC;;EAgB1CC,KAAK,CAAEP,KAAF,QAAoB;IAAA,IAAX;MAAEQ;IAAF,CAAW;IACvB,MAAMC,MAAM,GAAGf,MAAM,CAACJ,aAAD,CAArB;IAEA,IAAI,CAACmB,MAAL,EAAa,MAAM,IAAIC,KAAJ,CAAU,oEAAV,CAAN;IAEb,MAAM;MACJC,KADI;MAEJC,mBAFI;MAGJC,WAHI;MAIJC,OAJI;MAKJC,SALI;MAMJC,QANI;MAOJC,UAPI;MAQJC,cARI;MASJC,SATI;MAUJC;IAVI,IAWFX,MAXJ;IAaA,MAAM;MAAEY;IAAF,IAAqB7B,UAAU,CAACsB,OAAD,CAArC;IAEA,MAAM;MACJQ,sBAAsB,EAAEC,qBADpB;MAEJC,qBAAqB,EAAEC;IAFnB,IAGFlC,kBAAkB,CAAC2B,cAAD,CAHtB;IAKA,MAAM;MACJI,sBAAsB,EAAEI,iBADpB;MAEJF,qBAAqB,EAAEG;IAFnB,IAGFpC,kBAAkB,CAAC0B,UAAD,CAHtB;IAKA,MAAMW,QAAQ,GAAGnC,QAAQ,CAAC,MAAO,SAAQ2B,QAAQ,CAACS,KAAT,GAAiB,WAAjB,GAA+B,cAAe,EAA9D,CAAzB;IACA,MAAMC,MAAM,GAAGrC,QAAQ,CAAC,MAAM2B,QAAQ,CAACS,KAAT,GAAiB,QAAjB,GAA4B,OAAnC,CAAvB;IAEA,MAAME,gBAAgB,GAAGtC,QAAQ,CAAC,MAAM;MACtC,OAAO;QACL,CAACmC,QAAQ,CAACC,KAAV,GAAkB,IADb;QAEL,CAACC,MAAM,CAACD,KAAR,GAAgB;MAFX,CAAP;IAID,CALgC,CAAjC;IAOA,MAAMG,cAAc,GAAGvC,QAAQ,CAAC,MAAMO,KAAK,CAACK,IAAN,GAAaL,KAAK,CAACC,KAA1B,CAA/B;IAEA,MAAMgC,eAAe,GAAGxC,QAAQ,CAAC,MAAM;MACrC,OAAO;QACL,CAACmC,QAAQ,CAACC,KAAV,GAAkBlC,aAAa,CAACK,KAAK,CAACC,KAAP,EAAc,GAAd,CAD1B;QAEL,CAAC6B,MAAM,CAACD,KAAR,GAAgBlC,aAAa,CAACqC,cAAc,CAACH,KAAhB,EAAuB,GAAvB;MAFxB,CAAP;IAID,CAL+B,CAAhC;IAOA,MAAMK,aAAa,GAAGzC,QAAQ,CAAC,MAAM;MACnC,MAAM0C,KAAK,GAAGf,QAAQ,CAACS,KAAT,GAAiBhB,WAAW,CAACgB,KAAZ,CAAkBO,KAAlB,GAA0BC,OAA1B,EAAjB,GAAuDxB,WAAW,CAACgB,KAAjF;MAEA,OAAOM,KAAK,CAACG,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,KAAiB;QAAA;;QAChC,MAAMC,iBAAiB,GAAGrB,QAAQ,CAACS,KAAT,GAAiB,QAAjB,GAA4B,qBAAtD;QACA,MAAMa,cAAc,GAAIH,IAAI,CAACI,QAAL,GAAgB,CAAhB,IAAqBJ,IAAI,CAACI,QAAL,GAAgB,GAAtC,GAA6ChD,aAAa,CAAC4C,IAAI,CAACI,QAAN,EAAgB,GAAhB,CAA1D,GAAiFC,SAAxG;QACA;UAAA,OAEUL,IAAI,CAACV,KAFf;UAAA,SAGW,CACL,sBADK,EAEL;YACE,gCAAgCU,IAAI,CAACI,QAAL,IAAiB3C,KAAK,CAACC,KAAvB,IAAgCsC,IAAI,CAACI,QAAL,IAAiB3C,KAAK,CAACK;UADzF,CAFK,CAHX;UAAA,SASW;YAAE,CAACoC,iBAAD,GAAqBC;UAAvB;QATX,IAYM,CAACH,IAAI,CAACM,KAAL,IAAcrC,KAAK,CAAC,YAAD,CAApB;UAAA,SACa;QADb,6CAEMA,KAAK,CAAC,YAAD,CAFX,qBAEM,uBAAAA,KAAK,EAAiB;UAAE+B,IAAF;UAAQC;QAAR,CAAjB,CAFX,+BAEgDD,IAAI,CAACM,KAFrD,EAZN;MAoBD,CAvBM,CAAP;IAwBD,CA3B6B,CAA9B;IA6BAhD,SAAS,CAAC,MAAM;MACd;QAAA,SAEW,CACL,gBADK,EAELwB,cAAc,CAACQ,KAFV,CAFX;QAAA,SAMW;UACL,yBAAyBlC,aAAa,CAACwB,SAAS,CAACU,KAAX,CADjC;UAEL,wBAAwBlC,aAAa,CAACqB,QAAQ,CAACa,KAAV,CAFhC;UAGLiB,SAAS,EAAE,CAAC1B,QAAQ,CAACS,KAAV,GAAkBjB,mBAAmB,CAACiB,KAAtC,GAA8Ce;QAHpD;MANX;QAAA,SAaa,CACL,4BADK,EAELlB,iBAAiB,CAACG,KAFb,EAGL;UACE,uCAAuC,CAAC,CAAClB,KAAK,CAACkB,KAAR,IAAiB,CAACX,cAAc,CAACW;QAD1E,CAHK,CAbb;QAAA,SAoBa,EACL,GAAGE,gBAAgB,CAACF,KADf;UAEL,GAAGF,gBAAgB,CAACE;QAFf;MApBb;QAAA,SA0Ba,CACL,sBADK,EAELN,qBAAqB,CAACM,KAFjB,CA1Bb;QAAA,SA8Ba,EACL,GAAGI,eAAe,CAACJ,KADd;UAEL,GAAGJ,oBAAoB,CAACI;QAFnB;MA9Bb,UAoCMd,SAAS,CAACc,KAAV;QAAA,SAES,CACL,uBADK,EAEL;UACE,sCAAsCd,SAAS,CAACc,KAAV,KAAoB;QAD5D,CAFK;MAFT,IASIK,aAAa,CAACL,KATlB,EApCN;IAkDD,CAnDQ,CAAT;IAqDA,OAAO,EAAP;EACD;;AApJyC,CAAD,CAApC"}
+{"version":3,"file":"VSliderTrack.mjs","names":["VSliderSymbol","useBackgroundColor","useRounded","computed","inject","convertToUnit","defineComponent","useRender","VSliderTrack","name","props","start","type","Number","required","stop","emits","setup","slots","slider","Error","color","horizontalDirection","parsedTicks","rounded","showTicks","tickSize","trackColor","trackFillColor","trackSize","vertical","min","max","roundedClasses","backgroundColorClasses","trackFillColorClasses","backgroundColorStyles","trackFillColorStyles","trackColorClasses","trackColorStyles","startDir","value","endDir","backgroundStyles","trackFillWidth","trackFillStyles","computedTicks","ticks","slice","reverse","map","tick","index","directionProperty","directionValue","position","undefined","label","direction"],"sources":["../../../src/components/VSlider/VSliderTrack.tsx"],"sourcesContent":["// Styles\nimport './VSliderTrack.sass'\n\n// Components\nimport { VSliderSymbol } from './slider'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { useRounded } from '@/composables/rounded'\n\n// Utilities\nimport { computed, inject } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\nexport const VSliderTrack = defineComponent({\n  name: 'VSliderTrack',\n\n  props: {\n    start: {\n      type: Number,\n      required: true,\n    },\n    stop: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: {},\n\n  setup (props, { slots }) {\n    const slider = inject(VSliderSymbol)\n\n    if (!slider) throw new Error('[Vuetify] v-slider-track must be inside v-slider or v-range-slider')\n\n    const {\n      color,\n      horizontalDirection,\n      parsedTicks,\n      rounded,\n      showTicks,\n      tickSize,\n      trackColor,\n      trackFillColor,\n      trackSize,\n      vertical,\n      min,\n      max,\n    } = slider\n\n    const { roundedClasses } = useRounded(rounded)\n\n    const {\n      backgroundColorClasses: trackFillColorClasses,\n      backgroundColorStyles: trackFillColorStyles,\n    } = useBackgroundColor(trackFillColor)\n\n    const {\n      backgroundColorClasses: trackColorClasses,\n      backgroundColorStyles: trackColorStyles,\n    } = useBackgroundColor(trackColor)\n\n    const startDir = computed(() => `inset-${vertical.value ? 'block-end' : 'inline-start'}`)\n    const endDir = computed(() => vertical.value ? 'height' : 'width')\n\n    const backgroundStyles = computed(() => {\n      return {\n        [startDir.value]: '0%',\n        [endDir.value]: '100%',\n      }\n    })\n\n    const trackFillWidth = computed(() => props.stop - props.start)\n\n    const trackFillStyles = computed(() => {\n      return {\n        [startDir.value]: convertToUnit(props.start, '%'),\n        [endDir.value]: convertToUnit(trackFillWidth.value, '%'),\n      }\n    })\n\n    const computedTicks = computed(() => {\n      const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value\n\n      return ticks.map((tick, index) => {\n        const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start'\n        const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined\n\n        return (\n          <div\n            key={ tick.value }\n            class={[\n              'v-slider-track__tick',\n              {\n                'v-slider-track__tick--filled': tick.position >= props.start && tick.position <= props.stop,\n                'v-slider-track__tick--first': tick.value === min.value,\n                'v-slider-track__tick--last': tick.value === max.value,\n              },\n            ]}\n            style={{ [directionProperty]: directionValue }}\n          >\n            {\n              (tick.label || slots['tick-label']) && (\n                <div class=\"v-slider-track__tick-label\">\n                  { slots['tick-label']?.({ tick, index }) ?? tick.label }\n                </div>\n              )\n            }\n          </div>\n        )\n      })\n    })\n\n    useRender(() => {\n      return (\n        <div\n          class={[\n            'v-slider-track',\n            roundedClasses.value,\n          ]}\n          style={{\n            '--v-slider-track-size': convertToUnit(trackSize.value),\n            '--v-slider-tick-size': convertToUnit(tickSize.value),\n            direction: !vertical.value ? horizontalDirection.value : undefined,\n          }}\n        >\n          <div\n            class={[\n              'v-slider-track__background',\n              trackColorClasses.value,\n              {\n                'v-slider-track__background--opacity': !!color.value || !trackFillColor.value,\n              },\n            ]}\n            style={{\n              ...backgroundStyles.value,\n              ...trackColorStyles.value,\n            }}\n          />\n          <div\n            class={[\n              'v-slider-track__fill',\n              trackFillColorClasses.value,\n            ]}\n            style={{\n              ...trackFillStyles.value,\n              ...trackFillColorStyles.value,\n            }}\n          />\n\n          { showTicks.value && (\n            <div\n              class={[\n                'v-slider-track__ticks',\n                {\n                  'v-slider-track__ticks--always-show': showTicks.value === 'always',\n                },\n              ]}\n            >\n              { computedTicks.value }\n            </div>\n          ) }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VSliderTrack = InstanceType<typeof VSliderTrack>\n"],"mappings":"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"}

package/lib/components/VSlider/VSliderTrack.sass

@@ -47,14 +47,14 @@
   height: var(--v-slider-tick-size)
   transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2))
 
-  &:first-child .v-slider-track__tick-label
+  &--first .v-slider-track__tick-label
     @include tools.ltr()
       transform: none
 
     @include tools.rtl()
       transform: translateX(100%)
 
-  &:last-child .v-slider-track__tick-label
+  &--last .v-slider-track__tick-label
     @include tools.ltr()
       transform: translateX(-100%)
 
@@ -87,7 +87,16 @@
     @include tools.rtl()
       transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2))
 
-    &:first-child
+    .v-slider-track__tick-label
+      margin-top: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-top})
+
+      @include tools.ltr()
+        transform: translateX(-50%)
+
+      @include tools.rtl()
+        transform: translateX(50%)
+
+    &--first
       margin-inline-start: calc(var(--v-slider-tick-size) + 1px)
 
       .v-slider-track__tick-label
@@ -97,7 +106,7 @@
         @include tools.rtl()
           transform: translateX(0%)
 
-    &:last-child
+    &--last
       margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px)
 
       .v-slider-track__tick-label
@@ -107,15 +116,6 @@
         @include tools.rtl()
           transform: translateX(100%)
 
-    .v-slider-track__tick-label
-      margin-top: calc(var(--v-slider-track-size) / 2 + #{$slider-tick-label-margin-top})
-
-      @include tools.ltr()
-        transform: translateX(-50%)
-
-      @include tools.rtl()
-        transform: translateX(50%)
-
 // Vertical
 .v-slider.v-input--vertical
   .v-slider-track
@@ -141,7 +141,7 @@
     @include tools.rtl()
       transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2))
 
-    &:last-child
+    &--last
       bottom: calc(0% + var(--v-slider-tick-size) + 1px)
 
     .v-slider-track__tick-label

package/lib/components/VSlider/_variables.scss

@@ -1,9 +1,9 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
-$slider-horizontal-left: 8px !default;
+$slider-horizontal-start: 8px !default;
 $slider-horizontal-min-height: 32px !default;
-$slider-horizontal-right: 8px !default;
+$slider-horizontal-end: 8px !default;
 $slider-label-margin-end: 12px !default;
 $slider-label-margin-start: 12px !default;
 $slider-state-track-background-opacity: 0.4 !default;