pxd 0.0.64 → 0.1.3

package/dist/components/slider/index.vue

@@ -1,310 +1,440 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { cachedOff, cachedOn, once } from "../../utils/event";
-import { NOOP } from "../../utils/event";
-import { getFallbackValue } from "../../utils/get";
-import { throttleByRaf } from "../../utils/timing";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { createTailwindVariant, useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { cachedOn, once, throttleByRaf } from "../../utils/event.js";
+import { getFallbackValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PSlider",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PSlider",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
+function clamp(value, lower, upper) {
+	return Math.min(Math.max(value, lower), upper);
+}
 const props = defineProps({
-  min: { type: Number, required: false, default: 0 },
-  max: { type: Number, required: false, default: 100 },
-  step: { type: Number, required: false, default: 1 },
-  range: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  size: { type: String, required: false },
-  variant: { type: String, required: false, default: "primary" },
-  modelValue: { type: [Number, Array, null], required: false, default: 0 }
+	min: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	max: {
+		type: Number,
+		required: false,
+		default: 100
+	},
+	step: {
+		type: [Number, Array],
+		required: false,
+		default: 1
+	},
+	range: {
+		type: Boolean,
+		required: false
+	},
+	stops: {
+		type: Boolean,
+		required: false
+	},
+	marks: {
+		type: Object,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "primary"
+	},
+	modelValue: {
+		type: [
+			Number,
+			Array,
+			null
+		],
+		required: false,
+		default: 0
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const SIZES = {
-  sm: {
-    track: "h-2",
-    thumb: "w-1.5 h-3.5"
-  },
-  md: {
-    track: "h-2.5",
-    thumb: "w-2 h-4.5"
-  },
-  lg: {
-    track: "h-3.5",
-    thumb: "w-2.5 h-5"
-  }
-};
+const configProvider = useConfigProvider();
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-slider group/slider relative flex w-full max-w-full shrink-0 touch-none items-center rounded-full bg-gray-200 select-none",
+	variants: {
+		size: {
+			sm: "h-2",
+			md: "h-2.5",
+			lg: "h-3.5"
+		},
+		disabled: { true: "cursor-not-allowed" }
+	}
+}, { selection: () => ({
+	size: props.size || configProvider.size,
+	disabled: props.disabled
+}) });
+const sliderThumbClasses = createTailwindVariant({
+	base: "pxd-slider--thumb group rounded-xs absolute -translate-x-1/2 transform-gpu touch-none bg-none self-focus-ring outline-none motion-safe:before:transition-appearance",
+	variants: {
+		size: {
+			sm: "w-1.5 h-3.5",
+			md: "w-2 h-4.5",
+			lg: "w-2.5 h-5"
+		},
+		disabled: { true: "pointer-events-none" },
+		appearance: {
+			none: "appearance-none",
+			auto: "appearance-auto"
+		}
+	}
+});
+const sliderMarkClasses = createTailwindVariant({
+	base: "pxd-slider--mark cursor-pointer absolute top-0 appearance-none rounded-xs bg-none p-0 font-inherit text-xs whitespace-nowrap leading-none select-none outline-none self-focus-ring motion-safe:transition-colors",
+	variants: {
+		align: {
+			start: "translate-x-0",
+			center: "-translate-x-1/2",
+			end: "-translate-x-full"
+		},
+		active: {
+			true: "text-primary",
+			false: "text-foreground-secondary enabled:hover:text-foreground"
+		},
+		disabled: { true: "cursor-not-allowed" }
+	}
+});
 const VARIANTS = {
-  primary: "var(--color-primary)",
-  success: "hsl(var(--color-blue-700-value))",
-  warning: "hsl(var(--color-amber-700-value))",
-  secondary: "hsl(var(--color-gray-700-value))",
-  error: "hsl(var(--color-red-700-value))"
+	primary: "var(--color-primary)",
+	success: "hsl(var(--color-blue-700-value))",
+	warning: "hsl(var(--color-amber-700-value))",
+	secondary: "hsl(var(--color-gray-700-value))",
+	error: "hsl(var(--color-red-700-value))"
 };
-let isDragging = false;
+const activeMarkClasses = sliderMarkClasses({ active: true });
+const inactiveMarkClasses = sliderMarkClasses({ active: false });
 let sliderRect = null;
 let lastClientX = null;
-const configProvider = useConfigProvider();
+let lastUpdatedValue = null;
+let stopMoveListener = null;
 const sliderRef = shallowRef();
-const modelValue = useModelValue(props, emits);
-const activeThumb = shallowRef();
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
+const activeThumb = shallowRef(null);
+const modelValue = useModelValue(props, emits, { withChange: false });
+// Outside range mode the start slot is pinned to `min`, so both modes share one pair and
+// only the emitted payload differs.
 const valueRange = computed(() => {
-  if (props.range) {
-    return Array.isArray(modelValue.value) ? modelValue.value : [props.min, modelValue.value];
-  }
-  return [props.min, modelValue.value];
+	const value = modelValue.value;
+	if (props.range) {
+		return Array.isArray(value) ? value : [props.min, value];
+	}
+	return [props.min, Array.isArray(value) ? value[1] ?? 0 : value];
 });
+function setValue(range) {
+	const value = props.range ? range : range[1];
+	modelValue.value = value;
+	return value;
+}
 function getPercentage(value) {
-  const { min, max } = props;
-  const range = max - min;
-  return Math.max(0, Math.min(100, (value - min) / range * 100));
+	return clamp((value - props.min) / (props.max - props.min) * 100, 0, 100);
+}
+function getNumericStepValues(min, max, step) {
+	if (step <= 0) {
+		return [];
+	}
+	// Only the values the drag/keyboard snapping can actually reach are stoppable.
+	const count = Math.floor((max - min) / step);
+	return Array.from({ length: count + 1 }, (_, index) => min + index * step);
+}
+const stepValues = computed(() => {
+	const { step, min, max } = props;
+	if (!Array.isArray(step)) {
+		return [];
+	}
+	return [...step].sort((a, b) => a - b).filter((value) => value >= min && value <= max);
+});
+function toValidValue(value) {
+	if (!Array.isArray(props.step)) {
+		const offset = value - props.min;
+		return clamp(props.step > 0 ? Math.round(offset / props.step) * props.step + props.min : value, props.min, props.max);
+	}
+	if (!stepValues.value.length) {
+		return props.min;
+	}
+	// Ties resolve to the lower value because the list is sorted ascending.
+	return stepValues.value.reduce((closest, stepValue) => Math.abs(stepValue - value) < Math.abs(closest - value) ? stepValue : closest);
+}
+function toKeyboardValue(current, isNegative) {
+	if (!Array.isArray(props.step)) {
+		return isNegative ? current - props.step : current + props.step;
+	}
+	const values = stepValues.value;
+	if (!values.length) {
+		return props.min;
+	}
+	const index = values.indexOf(current);
+	if (index !== -1) {
+		return values[Math.min(Math.max(index + (isNegative ? -1 : 1), 0), values.length - 1)];
+	}
+	// The current value is off-grid: jump to the closest allowed value in the pressed direction.
+	const candidates = isNegative ? values.slice().reverse() : values;
+	return candidates.find((value) => isNegative ? value < current : value > current) ?? current;
 }
 const startPercentage = computed(() => getPercentage(valueRange.value[0]));
 const endPercentage = computed(() => getPercentage(valueRange.value[1]));
-const trackStyle = computed(() => {
-  const backgroundColor = props.disabled ? "var(--color-gray-alpha-400)" : getFallbackValue(props.variant, VARIANTS, "primary");
-  if (props.range) {
-    return {
-      left: `${startPercentage.value}%`,
-      width: `${endPercentage.value - startPercentage.value}%`,
-      backgroundColor
-    };
-  }
-  return {
-    width: `${endPercentage.value}%`,
-    backgroundColor
-  };
+const stopList = computed(() => {
+	const { stops, min, max, step } = props;
+	if (!stops || max <= min) {
+		return [];
+	}
+	const values = Array.isArray(step) ? stepValues.value : getNumericStepValues(min, max, step);
+	// Only the interior steps get a dot: the track edges already say where min
+	// and max are, and a dot there has nowhere to sit without hanging off the track.
+	return values.map((value) => ({
+		value,
+		percentage: getPercentage(value)
+	})).filter((stop) => stop.percentage > 0 && stop.percentage < 100);
+});
+const markList = computed(() => {
+	const { marks, min, max, disabled } = props;
+	if (!marks) {
+		return [];
+	}
+	const entries = Object.keys(marks).map((key) => {
+		const value = Number(key);
+		return {
+			value,
+			label: marks[value]
+		};
+	}).filter((mark) => mark.value >= min && mark.value <= max);
+	return entries.map((mark, index) => ({
+		value: mark.value,
+		label: mark.label,
+		percentage: getPercentage(mark.value),
+		classes: sliderMarkClasses({
+			align: entries.length < 2 ? "center" : index === 0 ? "start" : index === entries.length - 1 ? "end" : "center",
+			disabled
+		})
+	}));
 });
+const thumbList = computed(() => {
+	const base = {
+		size: props.size || configProvider.size,
+		disabled: props.disabled
+	};
+	const [start, end] = valueRange.value;
+	const endThumb = {
+		index: 1,
+		value: end,
+		percentage: endPercentage.value,
+		appearance: "auto"
+	};
+	const thumbs = props.range ? [{
+		index: 0,
+		value: start,
+		percentage: startPercentage.value,
+		appearance: "none"
+	}, endThumb] : [endThumb];
+	return thumbs.map((thumb) => ({
+		...thumb,
+		classes: sliderThumbClasses({
+			...base,
+			appearance: thumb.appearance
+		})
+	}));
+});
+const trackStyle = computed(() => ({
+	left: `${startPercentage.value}%`,
+	width: `${endPercentage.value - startPercentage.value}%`,
+	backgroundColor: props.disabled ? "var(--color-gray-alpha-400)" : getFallbackValue(props.variant, VARIANTS, "primary")
+}));
 function updateValueFromPosition(clientX) {
-  if (!sliderRef.value || !activeThumb.value) {
-    return;
-  }
-  const rect = sliderRect ?? sliderRef.value.getBoundingClientRect();
-  const posPercentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-  const range = props.max - props.min;
-  const rawValue = props.min + posPercentage * range;
-  const newValue = Math.max(
-    props.min,
-    Math.min(props.max, props.step > 0 ? Math.round(rawValue / props.step) * props.step : rawValue)
-  );
-  if (props.range) {
-    const newValueArray = [...valueRange.value];
-    if (activeThumb.value === "start") {
-      newValueArray[0] = newValue;
-      if (newValue > newValueArray[1]) {
-        ;
-        [newValueArray[0], newValueArray[1]] = [newValueArray[1], newValueArray[0]];
-        activeThumb.value = "end";
-      }
-    } else {
-      newValueArray[1] = newValue;
-      if (newValue < newValueArray[0]) {
-        ;
-        [newValueArray[0], newValueArray[1]] = [newValueArray[1], newValueArray[0]];
-        activeThumb.value = "start";
-      }
-    }
-    if (valueRange.value[0] !== newValueArray[0] || valueRange.value[1] !== newValueArray[1]) {
-      modelValue.value = newValueArray;
-    }
-  } else if (modelValue.value !== newValue) {
-    modelValue.value = newValue;
-  }
+	const index = activeThumb.value;
+	if (!sliderRef.value || index === null) {
+		return;
+	}
+	const rect = sliderRect ?? sliderRef.value.getBoundingClientRect();
+	const position = clamp((clientX - rect.left) / rect.width, 0, 1);
+	const next = [...valueRange.value];
+	next[index] = toValidValue(props.min + position * (props.max - props.min));
+	// Dragging a thumb past its neighbour hands the drag over instead of clamping.
+	if (next[0] > next[1]) {
+		next.reverse();
+		activeThumb.value = index === 0 ? 1 : 0;
+	}
+	if (next[0] !== valueRange.value[0] || next[1] !== valueRange.value[1]) {
+		lastUpdatedValue = setValue(next);
+	}
 }
 const scheduleUpdate = throttleByRaf(() => {
-  if (lastClientX !== null) {
-    updateValueFromPosition(lastClientX);
-  }
+	if (lastClientX !== null) {
+		updateValueFromPosition(lastClientX);
+	}
 });
-function startDragging(ev, thumb) {
-  if (!sliderRef.value) {
-    return;
-  }
-  sliderRect = sliderRef.value.getBoundingClientRect();
-  isDragging = true;
-  activeThumb.value = thumb;
-  lastClientX = ev.clientX;
-  updateValueFromPosition(ev.clientX);
-  once(document, "pointerup", endDragging);
-  once(document, "pointercancel", endDragging);
-  cachedOn(document, "pointermove", handleMove, { passive: false });
-}
 function handleMove(ev) {
-  if (!isDragging || props.disabled) {
-    return;
-  }
-  ev.preventDefault();
-  lastClientX = ev.clientX;
-  scheduleUpdate();
+	if (activeThumb.value === null || props.disabled) {
+		return;
+	}
+	ev.preventDefault();
+	lastClientX = ev.clientX;
+	scheduleUpdate();
+}
+function startDragging(ev, index) {
+	if (!sliderRef.value || props.disabled || activeThumb.value !== null) {
+		return;
+	}
+	sliderRect = sliderRef.value.getBoundingClientRect();
+	activeThumb.value = index;
+	lastClientX = ev.clientX;
+	updateValueFromPosition(ev.clientX);
+	once(document, "pointerup", endDragging);
+	once(document, "pointercancel", stopDragging);
+	stopMoveListener = cachedOn(document, "pointermove", handleMove, { passive: false });
+}
+function stopDragging() {
+	activeThumb.value = null;
+	sliderRect = null;
+	lastClientX = null;
+	lastUpdatedValue = null;
+	scheduleUpdate.cancel();
+	stopMoveListener?.();
+	stopMoveListener = null;
+	document.removeEventListener("pointerup", endDragging);
+	document.removeEventListener("pointercancel", stopDragging);
 }
-function endDragging() {
-  isDragging = false;
-  lastClientX = null;
-  sliderRect = null;
-  activeThumb.value = null;
-  scheduleUpdate.cancel();
-  cachedOff(document, "pointermove", handleMove);
-  cachedOff(document, "pointercancel", endDragging);
+function endDragging(ev) {
+	updateValueFromPosition(ev.clientX);
+	if (lastUpdatedValue !== null) {
+		emits("change", lastUpdatedValue);
+	}
+	stopDragging();
 }
-function handleSliderClick(ev) {
-  if (isDragging || !props.range || props.disabled) {
-    return;
-  }
-  const rect = sliderRef.value?.getBoundingClientRect();
-  if (!rect) {
-    return;
-  }
-  const clickPosition = (ev.clientX - rect.left) / rect.width;
-  const startPos = startPercentage.value / 100;
-  const endPos = endPercentage.value / 100;
-  const thumb = Math.abs(clickPosition - startPos) < Math.abs(clickPosition - endPos) ? "start" : "end";
-  startDragging(ev, thumb);
+function nearestThumbIndex(clientX) {
+	const rect = sliderRef.value?.getBoundingClientRect();
+	const position = rect ? (clientX - rect.left) / rect.width : 0;
+	return Math.abs(position - startPercentage.value / 100) < Math.abs(position - endPercentage.value / 100) ? 0 : 1;
 }
-function onWrapperPointerdown(ev) {
-  if (props.disabled) {
-    return;
-  }
-  if (props.range) {
-    handleSliderClick(ev);
-    return;
-  }
-  startDragging(ev, "end");
+function onTrackPointerdown(ev) {
+	startDragging(ev, props.range ? nearestThumbIndex(ev.clientX) : 1);
+}
+function isSameValue(a, b) {
+	return Array.isArray(a) && Array.isArray(b) ? a.length === b.length && a.every((value, index) => value === b[index]) : a === b;
 }
 function initModelValue() {
-  if (props.range && !Array.isArray(modelValue.value)) {
-    modelValue.value = [props.min, modelValue.value];
-  } else if (!props.range && Array.isArray(modelValue.value)) {
-    modelValue.value = modelValue.value[1] ?? 0;
-  }
+	const [start, end] = valueRange.value;
+	// An array step spells out the allowed values, so an off-list value is corrected on mount
+	// instead of lingering until the first interaction.
+	const snapped = Array.isArray(props.step) ? [toValidValue(start), toValidValue(end)].sort((a, b) => a - b) : [start, end];
+	const value = props.range ? snapped : snapped[1];
+	if (!isSameValue(modelValue.value, value)) {
+		modelValue.value = value;
+	}
+}
+function onThumbKeydown(ev, index) {
+	if (props.disabled) {
+		return;
+	}
+	const { code } = ev;
+	const isNegative = code === "ArrowLeft";
+	if (!isNegative && code !== "ArrowRight") {
+		return;
+	}
+	ev.preventDefault();
+	const next = [...valueRange.value];
+	// A thumb never crosses the other one; outside range mode the start slot is pinned to
+	// `min`, which leaves the full [min, max] span.
+	next[index] = clamp(toKeyboardValue(next[index], isNegative), index === 0 ? props.min : next[0], index === 0 ? next[1] : props.max);
+	if (next[index] === valueRange.value[index]) {
+		return;
+	}
+	emits("change", setValue(next));
 }
-function onThumbKeydown(ev) {
-  if (props.disabled) {
-    return;
-  }
-  const { code } = ev;
-  const delta = code === "ArrowLeft" ? -props.step : code === "ArrowRight" ? props.step : 0;
-  if (!delta) {
-    return;
-  }
-  ev.preventDefault();
-  const target = ev.target;
-  const isStart = target.dataset.rangeStart === "true";
-  if (props.range) {
-    const [startVal, endVal] = valueRange.value;
-    const newRange = [startVal, endVal];
-    if (isStart) {
-      newRange[0] = Math.max(props.min, Math.min(endVal, startVal + delta));
-    } else {
-      newRange[1] = Math.max(startVal, Math.min(props.max, endVal + delta));
-    }
-    if (newRange[0] !== startVal || newRange[1] !== endVal) {
-      modelValue.value = newRange;
-    }
-  } else {
-    const current = modelValue.value;
-    const newValue = Math.max(props.min, Math.min(props.max, current + delta));
-    if (newValue !== current) {
-      modelValue.value = newValue;
-    }
-  }
+function selectMark(value) {
+	if (props.disabled) {
+		return;
+	}
+	const next = [...valueRange.value];
+	// Move the thumb the mark sits closest to, matching a click on the track.
+	const index = props.range && Math.abs(value - next[0]) < Math.abs(value - next[1]) ? 0 : 1;
+	next[index] = value;
+	if (next[index] === valueRange.value[index]) {
+		return;
+	}
+	emits("change", setValue(next));
 }
 initModelValue();
-onBeforeUnmount(() => {
-  scheduleUpdate.cancel();
-  cachedOff(document, "pointermove", handleMove);
-  cachedOff(document, "pointerup", endDragging);
-  cachedOff(document, "pointercancel", endDragging);
-});
+onBeforeUnmount(stopDragging);
 </script>
 
 <template>
   <div
-    v-bind="$attrs"
-    ref="sliderRef"
-    :role="range ? 'group' : 'slider'"
-    class="pxd-slider group/slider relative flex w-full max-w-full shrink-0 touch-none items-center rounded-full bg-gray-200 select-none"
-    :class="[{ 'cursor-not-allowed': disabled }, computedSize.track]"
-    @pointerdown.prevent="onWrapperPointerdown"
+    data-slider
+    v-bind="attrs"
+    :data-variant="variant"
+    class="pxd-slider--container w-full max-w-full shrink-0"
   >
-    <div class="pxd-slider--track absolute h-full touch-none rounded-full" :style="trackStyle" />
-
     <div
-      v-if="props.range"
-      tabindex="0"
-      :data-dragging="isDragging && activeThumb === 'start'"
-      :data-range-start="true"
-      class="pxd-slider--thumb group rounded-xs absolute -translate-x-1/2 transform-gpu touch-none appearance-none bg-none self-focus-ring outline-none hover:z-1 active:[--slider-thumb-scale:1.3] motion-safe:before:transition-appearance pointer-fine:hover:[--slider-thumb-scale:1.3]"
-      :class="[{ 'pointer-events-none': disabled }, computedSize.thumb]"
-      :style="{ left: `${startPercentage}%` }"
-      @keydown="onThumbKeydown"
-      @contextmenu.prevent="NOOP"
-      @pointerdown.prevent.stop="startDragging($event, 'start')"
+      ref="sliderRef"
+      :role="range ? 'group' : 'slider'"
+      :class="classes"
+      @pointerdown.prevent="onTrackPointerdown"
     >
+      <div class="pxd-slider--track absolute h-full touch-none rounded-full" :style="trackStyle" />
+
       <span
-        class="py-1 px-1.5 text-xs -top-8 pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-md bg-gray-1000 whitespace-nowrap text-gray-100 opacity-0 shadow-border-base shadow-border-tooltip select-none group-hover:opacity-100 group-data-[dragging=true]:opacity-100 motion-safe:transition-opacity"
+        v-for="stop in stopList"
+        :key="stop.value"
+        class="pxd-slider--stop size-1 pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-gray-alpha-200"
+        :style="{ left: `${stop.percentage}%` }"
+      />
+
+      <div
+        v-for="thumb in thumbList"
+        :key="thumb.index"
+        tabindex="0"
+        :data-dragging="activeThumb === thumb.index"
+        :class="thumb.classes"
+        :style="{ left: `${thumb.percentage}%` }"
+        @keydown="onThumbKeydown($event, thumb.index)"
+        @contextmenu.prevent
+        @pointerdown.prevent.stop="startDragging($event, thumb.index)"
       >
-        {{ valueRange[0] }}
-      </span>
+        <span
+          class="pxd-slider--label py-1 px-1 text-xs -top-7 shadow-xl pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-sm border border-gray-alpha-300 bg-gray-1000 leading-none whitespace-nowrap text-gray-100 tabular-nums opacity-0 select-none group-hover:opacity-100 group-data-[dragging=true]:opacity-100 motion-safe:transition-opacity"
+        >
+          {{ thumb.value }}
+        </span>
+      </div>
     </div>
 
-    <div
-      tabindex="0"
-      :data-range-start="range ? false : true"
-      :data-dragging="isDragging && activeThumb === 'end'"
-      class="pxd-slider--thumb group rounded-xs absolute -translate-x-1/2 transform-gpu touch-none appearance-auto bg-none self-focus-ring outline-none hover:z-1 active:[--slider-thumb-scale:1.3] motion-safe:before:transition-appearance pointer-fine:hover:[--slider-thumb-scale:1.3]"
-      :class="[{ 'pointer-events-none': disabled }, computedSize.thumb]"
-      :style="{ left: `${endPercentage}%` }"
-      @keydown="onThumbKeydown"
-      @contextmenu.prevent="NOOP"
-      @pointerdown.prevent.stop="startDragging($event, 'end')"
-    >
-      <span
-        class="py-1 px-1.5 text-xs -top-8 pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-md bg-gray-1000 whitespace-nowrap text-gray-100 opacity-0 shadow-border-base shadow-border-tooltip select-none group-hover:opacity-100 group-data-[dragging=true]:opacity-100 motion-safe:transition-opacity"
+    <div v-if="markList.length" class="mbs-2 h-3 relative">
+      <button
+        v-for="mark in markList"
+        :key="mark.value"
+        type="button"
+        tabindex="-1"
+        :disabled="disabled"
+        :class="[
+  mark.classes,
+  mark.value <= valueRange[1] ? activeMarkClasses : inactiveMarkClasses
+]"
+        :style="{ left: `${mark.percentage}%` }"
+        @click="selectMark(mark.value)"
       >
-        {{ valueRange[1] }}
-      </span>
+        {{ mark.label }}
+      </button>
     </div>
   </div>
 </template>
 
-<style lang="postcss">
-.pxd-slider--thumb {
-  &[data-dragging='true'] {
-    --slider-thumb-scale: 1.3;
-  }
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border-radius: inherit;
-    transform: translate3d(-50%, -50%, 0) scale(var(--slider-thumb-scale, 1));
-  }
-
-  &::before {
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-    box-shadow:
-      0 0 0 1px var(--color-gray-alpha-500),
-      0 1px 2px var(--color-gray-alpha-100);
-  }
-
-  &::after {
-    width: 200%;
-    height: 200%;
-  }
-}
-
-.dark .pxd-slider--thumb::before {
-  box-shadow: 0 0 0 1px var(--color-background-200);
-}
+<style>
+.pxd-slider--thumb:active,.pxd-slider--thumb[data-dragging=true]{--slider-thumb-scale:1.3;z-index:1}.pxd-slider--thumb:after,.pxd-slider--thumb:before{border-radius:inherit;content:"";left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) scale(var(--slider-thumb-scale,1))}.pxd-slider--thumb:before{background-color:#fff;box-shadow:0 0 0 1px var(--color-gray-alpha-500),0 1px 2px var(--color-gray-alpha-100);height:100%;width:100%}.pxd-slider--thumb:after{height:200%;width:200%}.dark .pxd-slider--thumb:before{box-shadow:0 0 0 1px var(--color-background-200)}
 </style>