@tremolo-ui/vue 0.8.0 → 0.9.0

package/src/components/PointsEditor/PointsEditorPoint.ts

@@ -1,27 +1,33 @@
 import {
+  type ComponentObjectPropsOptions,
   computed,
   defineComponent,
+  type ExtractPublicPropTypes,
   h,
   mergeProps,
+  type PropType,
   ref,
   useId,
   watch,
-  type PropType,
 } from 'vue'
 
 import {
-  arrowKeyMove,
-  clampPoint,
   createDragValue,
   elementMapping,
-  POINT_AXIS,
-  selectModifier,
   type InputEventOption,
   type ModifierValue,
+  type ChangeSource,
   type PointPosition,
   type PointsEditorPoint as PointRegistration,
 } from '@tremolo-ui/dom'
+import {
+  arrowKeyMove,
+  clampPoint,
+  POINT_AXIS,
+  selectModifier,
+} from '@tremolo-ui/dom/internal'
 
+import { useChangeGesture } from '../_util/change-gesture'
 import { checkPlacement } from '../_util/placement'
 import { visuallyHiddenRangeInput } from '../_util/visually-hidden-range-input'
 
@@ -32,44 +38,65 @@ type PerAxis = string | Partial<Record<'x' | 'y', string>>
 const perAxis = (setting: PerAxis | undefined, axis: 'x' | 'y') =>
   typeof setting === 'string' ? setting : setting?.[axis]
 
+const pointsEditorPointProps = {
+  /** Where the point is, with `y` growing downwards. Bind it with `v-model`. */
+  modelValue: { type: Object as PropType<PointPosition>, required: true },
+  /** How the selection refers to this point. One is generated when left out. */
+  id: String,
+  /** The lowest position the point can take, per axis. */
+  min: Object as PropType<Partial<PointPosition>>,
+  /** The highest position the point can take, per axis. */
+  max: Object as PropType<Partial<PointPosition>>,
+  /** Sets `--color`, for the theme to colour the point with. */
+  color: String,
+  /** Overrides the `disabled` of `PointsEditor`. */
+  disabled: { type: Boolean, default: undefined },
+  /** Overrides the `readonly` of `PointsEditor`. */
+  readonly: { type: Boolean, default: undefined },
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: { type: Number, default: 500 },
+  /** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
+  wheel: {
+    type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
+    default: undefined,
+  },
+  /** Overrides the `keyboard` of `PointsEditor`; `null` turns it off. */
+  keyboard: {
+    type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
+    default: undefined,
+  },
+  /** The accessible name of each axis, or one for both. */
+  ariaLabel: [String, Object] as PropType<PerAxis>,
+  /** What the value of each axis means, or one for both. */
+  ariaValuetext: [String, Object] as PropType<PerAxis>,
+} satisfies ComponentObjectPropsOptions
+
+export type PointsEditorPointProps = ExtractPublicPropTypes<
+  typeof pointsEditorPointProps
+>
+
 /** One point, bound with `v-model` as `{ x, y }` from 0 to 1. */
 export const PointsEditorPoint = /* @__PURE__ */ defineComponent({
   name: 'PointsEditorPoint',
   inheritAttrs: false,
-  props: {
-    /** Where the point is, with `y` growing downwards. Bind it with `v-model`. */
-    modelValue: { type: Object as PropType<PointPosition>, required: true },
-    /** How the selection refers to this point. One is generated when left out. */
-    id: String,
-    /** The lowest position the point can take, per axis. */
-    min: Object as PropType<Partial<PointPosition>>,
-    /** The highest position the point can take, per axis. */
-    max: Object as PropType<Partial<PointPosition>>,
-    /** Sets `--color`, for the theme to colour the point with. */
-    color: String,
-    /** Overrides the `disabled` of `PointsEditor`. */
-    disabled: { type: Boolean, default: undefined },
-    /** Overrides the `readonly` of `PointsEditor`. */
-    readonly: { type: Boolean, default: undefined },
-    /** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
-    wheel: {
-      type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
-      default: undefined,
-    },
-    /** Overrides the `keyboard` of `PointsEditor`; `null` turns it off. */
-    keyboard: {
-      type: [Array, Object] as PropType<ModifierValue<InputEventOption> | null>,
-      default: undefined,
-    },
-    /** The accessible name of each axis, or one for both. */
-    ariaLabel: [String, Object] as PropType<PerAxis>,
-    /** What the value of each axis means, or one for both. */
-    ariaValuetext: [String, Object] as PropType<PerAxis>,
-  },
+  props: pointsEditorPointProps,
   emits: {
     'update:modelValue': (value: PointPosition) => typeof value === 'object',
-    dragStart: (value: PointPosition) => typeof value === 'object',
-    dragEnd: (value: PointPosition) => typeof value === 'object',
+    /**
+     * A change of this point started — a drag on it, the first wheel notch or
+     * arrow key while it has the focus — with where it is and what the change
+     * is made with. The points that move along with a selection report
+     * through `update:modelValue` only.
+     */
+    changeStart: (value: PointPosition, _source: ChangeSource) =>
+      typeof value === 'object',
+    /** The change ended, with where the point is. */
+    changeEnd: (value: PointPosition, _source: ChangeSource) =>
+      typeof value === 'object',
   },
   setup(props, { slots, attrs, emit }) {
     const points = usePointsEditorContext()
@@ -90,6 +117,14 @@ export const PointsEditorPoint = /* @__PURE__ */ defineComponent({
       clampPoint(props.modelValue, props.min, props.max),
     )
 
+    const gesture = useChangeGesture({
+      value: () => current.value,
+      inactive: () => inactive.value,
+      endDelay: () => props.changeEndDelay,
+      onStart: (value, source) => emit('changeStart', value, source),
+      onEnd: (value, source) => emit('changeEnd', value, source),
+    })
+
     const el = ref<HTMLDivElement | null>(null)
     const x = ref<HTMLInputElement | null>(null)
     const dragging = ref(false)
@@ -101,9 +136,13 @@ export const PointsEditorPoint = /* @__PURE__ */ defineComponent({
       min: props.min,
       max: props.max,
       readonly: inactive.value,
-      onChange: (next) => emit('update:modelValue', next),
+      onChange: (next) => {
+        gesture.changed(next)
+        emit('update:modelValue', next)
+      },
       element: el.value,
       wheel: wheel.value,
+      beforeWheel: () => gesture.pulse('wheel'),
     })
     watch(
       id,
@@ -125,7 +164,7 @@ export const PointsEditorPoint = /* @__PURE__ */ defineComponent({
             sensitivity: (state) =>
               selectModifier(points.dragSensitivity, state.event).value,
           }),
-          cursor: inactive.value ? undefined : points.cursor,
+          cursor: inactive.value ? undefined : points.dragCursor,
           shouldStart: () => !disabled.value,
           // A move rather than a position: the point keeps the offset it was
           // grabbed at, and everything else selected moves with it.
@@ -142,16 +181,16 @@ export const PointsEditorPoint = /* @__PURE__ */ defineComponent({
             origin = { x: px, y: py }
             dragging.value = true
             x.value?.focus()
-            if (!inactive.value) emit('dragStart', current.value)
+            if (!inactive.value) gesture.hold('pointer')
           },
           onDragEnd: () => {
             origin = null
             dragging.value = false
-            if (!inactive.value) emit('dragEnd', current.value)
+            gesture.end()
           },
         })
         const stop = watch(
-          () => (inactive.value ? undefined : points.cursor),
+          () => (inactive.value ? undefined : points.dragCursor),
           (cursor) => drag.update({ cursor }),
         )
         onCleanup(() => {
@@ -234,6 +273,7 @@ export const PointsEditorPoint = /* @__PURE__ */ defineComponent({
                 if (!move) return
                 event.preventDefault()
                 if (inactive.value || !keyboard.value) return
+                gesture.pulse('keyboard')
                 points.editor.nudgePoint(
                   id.value,
                   move.axis === 0 ? 'x' : 'y',

package/src/components/PointsEditor/context.ts

@@ -16,7 +16,7 @@ export interface PointsEditorContextValue {
   readonly wheel: ModifierValue<InputEventOption> | null
   readonly keyboard: ModifierValue<InputEventOption> | null
   readonly dragSensitivity: ModifierValue<number>
-  readonly cursor: string
+  readonly dragCursor: string
   readonly selectable: boolean
   /** Ids of the selected points. Always empty while `selectable` is off. */
   readonly selection: readonly string[]

package/src/components/PointsEditor/index.ts

@@ -2,8 +2,11 @@ export {
   usePointsEditorContext,
   type PointsEditorContextValue,
 } from './context'
-export { PointsEditor } from './PointsEditor'
+export { PointsEditor, type PointsEditorProps } from './PointsEditor'
 export { PointsEditorBackground } from './PointsEditorBackground'
 export { PointsEditorContainer } from './PointsEditorContainer'
-export { PointsEditorPoint } from './PointsEditorPoint'
+export {
+  PointsEditorPoint,
+  type PointsEditorPointProps,
+} from './PointsEditorPoint'
 export { PointsEditorSelectionBox } from './PointsEditorSelectionBox'

package/src/components/Slider/Slider.ts

@@ -1,58 +1,92 @@
-import { computed, defineComponent, h, provide, ref, type PropType } from 'vue'
+import {
+  type ComponentObjectPropsOptions,
+  computed,
+  defineComponent,
+  type ExtractPublicPropTypes,
+  h,
+  type PropType,
+  provide,
+  ref,
+} from 'vue'
 
 import {
-  applyDelta,
-  arrowKeyDirection,
   elementMapping,
-  selectModifier,
   valuePercent,
-  wheelDirection,
   type AxisOptions,
+  type ChangeSource,
   type XY,
 } from '@tremolo-ui/dom'
+import {
+  applyDelta,
+  arrowKeyDirection,
+  selectModifier,
+  wheelDirection,
+} from '@tremolo-ui/dom/internal'
 import { linearScale, type Scale } from '@tremolo-ui/functions'
 
 import { useDragValue } from '../../composables/useDragValue'
 import { useWheel } from '../../composables/useWheel'
+import { useChangeGesture } from '../_util/change-gesture'
 import { dragSensitivityProp, keyboardProp, wheelProp } from '../_util/props'
 import { useCheckSteps } from '../_util/useCheckSteps'
 
 import { SliderKey } from './context'
 
+const sliderProps = {
+  /** The current value. Bind it with `v-model`. */
+  modelValue: { type: Number, required: true },
+  /** The value at the start of the travel. */
+  min: { type: Number, required: true },
+  /** The value at the end of the travel. */
+  max: { type: Number, required: true },
+  /** Granularity of the value. @default 1 */
+  step: { type: Number, default: 1 },
+  /** How the value is distributed across the travel. @default linearScale */
+  scale: { type: Object as PropType<Scale>, default: () => linearScale },
+  /**
+   * Which way the slider runs. A vertical slider grows upwards.
+   * @default 'horizontal'
+   */
+  orientation: {
+    type: String as PropType<'horizontal' | 'vertical'>,
+    default: 'horizontal',
+  },
+  /** Grow the value the other way. */
+  reverse: Boolean,
+  /** The cursor to show while dragging. @default 'pointer' */
+  dragCursor: { type: String, default: 'pointer' },
+  wheel: wheelProp,
+  keyboard: keyboardProp,
+  dragSensitivity: dragSensitivityProp,
+  /** Make the slider unchangeable and remove it from the tab order. */
+  disabled: Boolean,
+  /** Make the value unchangeable. */
+  readonly: Boolean,
+  /**
+   * How long after the last wheel notch or arrow key a change counts as over,
+   * in milliseconds, for `change-end`.
+   * @default 500
+   */
+  changeEndDelay: { type: Number, default: 500 },
+} satisfies ComponentObjectPropsOptions
+
+export type SliderProps = ExtractPublicPropTypes<typeof sliderProps>
+
 /** Customizable slider. Bind the value with `v-model`. */
 export const Slider = /* @__PURE__ */ defineComponent({
   name: 'Slider',
-  props: {
-    /** The current value. Bind it with `v-model`. */
-    modelValue: { type: Number, required: true },
-    /** The value at the start of the travel. */
-    min: { type: Number, required: true },
-    /** The value at the end of the travel. */
-    max: { type: Number, required: true },
-    /** Granularity of the value. @default 1 */
-    step: { type: Number, default: 1 },
-    /** How the value is distributed across the travel. @default linearScale */
-    scale: { type: Object as PropType<Scale>, default: () => linearScale },
-    /** Run the slider vertically, with the value growing upwards. */
-    vertical: Boolean,
-    /** Grow the value the other way. */
-    reverse: Boolean,
-    /** The cursor to show while dragging. @default { cursor: 'pointer' } */
-    externalStyles: Object as PropType<{ cursor?: string }>,
-    wheel: wheelProp,
-    keyboard: keyboardProp,
-    dragSensitivity: dragSensitivityProp,
-    /** Make the slider unchangeable and remove it from the tab order. */
-    disabled: Boolean,
-    /** Make the value unchangeable. */
-    readonly: Boolean,
-  },
+  props: sliderProps,
   emits: {
     'update:modelValue': (value: number) => typeof value === 'number',
-    /** A drag started, with the value where the track was pressed. */
-    dragStart: (value: number) => typeof value === 'number',
-    /** The drag ended, with the value it ended on. */
-    dragEnd: (value: number) => typeof value === 'number',
+    /**
+     * A change of the value started, with the value before it and what it is
+     * made with.
+     */
+    changeStart: (value: number, _source: ChangeSource) =>
+      typeof value === 'number',
+    /** The change ended, with the value it ended on. */
+    changeEnd: (value: number, _source: ChangeSource) =>
+      typeof value === 'number',
   },
   setup(props, { slots, emit, expose }) {
     const root = ref<HTMLDivElement | null>(null)
@@ -62,7 +96,8 @@ export const Slider = /* @__PURE__ */ defineComponent({
     const inactive = computed(() => props.disabled || props.readonly)
     // Measured from the left or the top, as CSS places things: vertical and
     // reverse each flip it, and together they cancel out.
-    const displayReversed = computed(() => props.vertical !== props.reverse)
+    const vertical = computed(() => props.orientation === 'vertical')
+    const displayReversed = computed(() => vertical.value !== props.reverse)
     const percent = computed(() =>
       valuePercent(
         props.modelValue,
@@ -85,7 +120,17 @@ export const Slider = /* @__PURE__ */ defineComponent({
       wheel: props.wheel,
     }))
 
-    const change = (next: number) => emit('update:modelValue', next)
+    const gesture = useChangeGesture({
+      value: () => props.modelValue,
+      inactive: () => inactive.value,
+      endDelay: () => props.changeEndDelay,
+      onStart: (value, source) => emit('changeStart', value, source),
+      onEnd: (value, source) => emit('changeEnd', value, source),
+    })
+    const change = (next: number) => {
+      gesture.changed(next)
+      emit('update:modelValue', next)
+    }
 
     provide(SliderKey, {
       get value() {
@@ -103,8 +148,8 @@ export const Slider = /* @__PURE__ */ defineComponent({
       get scale() {
         return props.scale
       },
-      get vertical() {
-        return props.vertical
+      get orientation() {
+        return props.orientation
       },
       get reverse() {
         return props.reverse
@@ -127,7 +172,7 @@ export const Slider = /* @__PURE__ */ defineComponent({
       },
     })
 
-    const valueOf = (v: XY<number>) => v[props.vertical ? 1 : 0]
+    const valueOf = (v: XY<number>) => v[vertical.value ? 1 : 0]
 
     useDragValue(root, () => ({
       axis: axis.value,
@@ -135,22 +180,18 @@ export const Slider = /* @__PURE__ */ defineComponent({
         sensitivity: (state) =>
           selectModifier(props.dragSensitivity, state.event).value,
       }),
-      cursor: inactive.value
-        ? undefined
-        : (props.externalStyles?.cursor ?? 'pointer'),
+      cursor: inactive.value ? undefined : props.dragCursor,
       shouldStart: () => !inactive.value,
       updateOnPointerDown: true,
       onChange: (v) => {
         if (!inactive.value) change(valueOf(v))
       },
-      onDragStart: (v) => {
+      onDragStart: () => {
         if (inactive.value) return
+        gesture.hold('pointer')
         thumb?.focus()
-        emit('dragStart', valueOf(v))
-      },
-      onDragEnd: (v) => {
-        if (!inactive.value) emit('dragEnd', valueOf(v))
       },
+      onDragEnd: () => gesture.end(),
     }))
 
     useWheel(
@@ -159,9 +200,10 @@ export const Slider = /* @__PURE__ */ defineComponent({
         if (!props.wheel || inactive.value) return
         // A notch the slider does not read — a sideways scroll on a vertical
         // slider — is left to the page rather than swallowed.
-        const direction = wheelDirection(event, { horizontal: !props.vertical })
+        const direction = wheelDirection(event, { horizontal: !vertical.value })
         if (direction === null) return
         event.preventDefault()
+        gesture.pulse('wheel')
         change(
           applyDelta(
             props.modelValue,
@@ -195,7 +237,7 @@ export const Slider = /* @__PURE__ */ defineComponent({
           ref: root,
           role: 'group',
           tabindex: -1,
-          'data-orientation': props.vertical ? 'vertical' : 'horizontal',
+          'data-orientation': props.orientation,
           'data-disabled': props.disabled ? '' : undefined,
           'data-readonly': props.readonly ? '' : undefined,
           onKeydown: (event: KeyboardEvent) => {
@@ -203,6 +245,7 @@ export const Slider = /* @__PURE__ */ defineComponent({
             if (direction === null) return
             event.preventDefault()
             if (!props.keyboard || inactive.value) return
+            gesture.pulse('keyboard')
             change(
               applyDelta(
                 props.modelValue,

package/src/components/Slider/SliderMarks.ts

@@ -1,25 +1,37 @@
-import { computed, defineComponent, h, type PropType } from 'vue'
+import {
+  type ComponentObjectPropsOptions,
+  computed,
+  defineComponent,
+  type ExtractPublicPropTypes,
+  h,
+  type PropType,
+} from 'vue'
 
-import { cssLength, sliderMarks, type MarksOptions } from '@tremolo-ui/dom'
+import { type MarksOptions } from '@tremolo-ui/dom'
+import { cssLength, sliderMarks } from '@tremolo-ui/dom/internal'
 
 import { providePlacement } from '../_util/placement'
 
 import { useSliderContext } from './context'
 import { SliderMarksOption } from './SliderMarksOption'
 
+const sliderMarksProps = {
+  /** Space between the marks and the track. Sets `--gap`. */
+  gap: [Number, String],
+  /**
+   * Build the marks instead of writing `SliderMarksOption` out: a number
+   * puts one every that many, `'step'` one every `step`. The default slot
+   * is ignored while it is set.
+   */
+  options: [String, Number, Object] as PropType<MarksOptions>,
+} satisfies ComponentObjectPropsOptions
+
+export type SliderMarksProps = ExtractPublicPropTypes<typeof sliderMarksProps>
+
 /** The marks along the slider: written out as options, or built from `options`. */
 export const SliderMarks = /* @__PURE__ */ defineComponent({
   name: 'SliderMarks',
-  props: {
-    /** Space between the marks and the track. Sets `--gap`. */
-    gap: [Number, String],
-    /**
-     * Build the marks instead of writing `SliderMarksOption` out: a number
-     * puts one every that many, `'step'` one every `step`. The default slot
-     * is ignored while it is set.
-     */
-    options: [String, Number, Object] as PropType<MarksOptions>,
-  },
+  props: sliderMarksProps,
   setup(props, { slots }) {
     const slider = useSliderContext()
     providePlacement('SliderMarks')
@@ -32,14 +44,16 @@ export const SliderMarks = /* @__PURE__ */ defineComponent({
         slider.step,
       )
       // In the order they are on screen.
-      return slider.vertical !== slider.reverse ? list.reverse() : list
+      return (slider.orientation === 'vertical') !== slider.reverse
+        ? list.reverse()
+        : list
     })
     // Each option inside is placed against this box.
     return () =>
       h(
         'div',
         {
-          'data-orientation': slider.vertical ? 'vertical' : 'horizontal',
+          'data-orientation': slider.orientation,
           style: { '--gap': cssLength(props.gap), position: 'relative' },
         },
         props.options !== undefined

package/src/components/Slider/SliderMarksOption.ts

@@ -1,38 +1,52 @@
-import { computed, defineComponent, h, type PropType } from 'vue'
+import {
+  type ComponentObjectPropsOptions,
+  computed,
+  defineComponent,
+  type ExtractPublicPropTypes,
+  h,
+  type PropType,
+} from 'vue'
 
-import { cssLength, valuePercent } from '@tremolo-ui/dom'
+import { valuePercent } from '@tremolo-ui/dom'
+import { cssLength } from '@tremolo-ui/dom/internal'
 
 import { checkPlacement } from '../_util/placement'
 
 import { useSliderContext } from './context'
 
+const sliderMarksOptionProps = {
+  /** Where the mark sits, on the same scale as the thumb. */
+  value: { type: Number, required: true },
+  /** Draw the mark itself. @default true */
+  mark: { type: Boolean, default: true },
+  /**
+   * Text shown next to the mark. Leave it out to show the value; `null`
+   * leaves the label out.
+   */
+  label: {
+    type: [Number, String, null] as PropType<number | string | null>,
+    default: undefined,
+  },
+  /** Thickness of the mark. Sets `--thickness`. */
+  thickness: [Number, String],
+  /** Length of the mark. Sets `--length`. */
+  length: [Number, String],
+  /** Space between the mark and the label. Sets `--gap`. */
+  gap: [Number, String],
+  /** Classes for the mark and the label inside the option. */
+  classes: Object as PropType<{ mark?: string; label?: string }>,
+  /** Styles for the mark and the label inside the option. */
+  styles: Object as PropType<{ mark?: string; label?: string }>,
+} satisfies ComponentObjectPropsOptions
+
+export type SliderMarksOptionProps = ExtractPublicPropTypes<
+  typeof sliderMarksOptionProps
+>
+
 /** One mark along the slider, and its label. */
 export const SliderMarksOption = /* @__PURE__ */ defineComponent({
   name: 'SliderMarksOption',
-  props: {
-    /** Where the mark sits, on the same scale as the thumb. */
-    value: { type: Number, required: true },
-    /** Draw the mark itself. @default true */
-    mark: { type: Boolean, default: true },
-    /**
-     * Text shown next to the mark. Leave it out to show the value; `null`
-     * leaves the label out.
-     */
-    label: {
-      type: [Number, String, null] as PropType<number | string | null>,
-      default: undefined,
-    },
-    /** Thickness of the mark. Sets `--thickness`. */
-    thickness: [Number, String],
-    /** Length of the mark. Sets `--length`. */
-    length: [Number, String],
-    /** Space between the mark and the label. Sets `--gap`. */
-    gap: [Number, String],
-    /** Classes for the mark and the label inside the option. */
-    classes: Object as PropType<{ mark?: string; label?: string }>,
-    /** Styles for the mark and the label inside the option. */
-    styles: Object as PropType<{ mark?: string; label?: string }>,
-  },
+  props: sliderMarksOptionProps,
   setup(props) {
     const slider = useSliderContext()
     checkPlacement('SliderMarksOption', 'SliderMarks')
@@ -41,11 +55,11 @@ export const SliderMarksOption = /* @__PURE__ */ defineComponent({
       valuePercent(
         props.value,
         { min: slider.min, max: slider.max, scale: slider.scale },
-        slider.vertical !== slider.reverse,
+        (slider.orientation === 'vertical') !== slider.reverse,
       ),
     )
     return () => {
-      const orientation = slider.vertical ? 'vertical' : 'horizontal'
+      const orientation = slider.orientation
       return h(
         'div',
         {
@@ -55,12 +69,19 @@ export const SliderMarksOption = /* @__PURE__ */ defineComponent({
             '--length': cssLength(props.length),
             '--gap': cssLength(props.gap),
             position: 'absolute',
-            translate: slider.vertical
-              ? 'var(--translate, 0 -50%)'
-              : 'var(--translate, -50% 0)',
+            translate:
+              slider.orientation === 'vertical'
+                ? 'var(--translate, 0 -50%)'
+                : 'var(--translate, -50% 0)',
             zIndex: 10,
-            left: slider.vertical ? undefined : `${percent.value}%`,
-            top: slider.vertical ? `${percent.value}%` : undefined,
+            left:
+              slider.orientation === 'vertical'
+                ? undefined
+                : `${percent.value}%`,
+            top:
+              slider.orientation === 'vertical'
+                ? `${percent.value}%`
+                : undefined,
           },
         },
         [