diff --git a/packages/core/src/useSlider/useSlider.ts b/packages/core/src/useSlider/useSlider.ts index ec4c4e39..968d245b 100644 --- a/packages/core/src/useSlider/useSlider.ts +++ b/packages/core/src/useSlider/useSlider.ts @@ -170,7 +170,7 @@ export function useSlider(_props: Reactivify, 'schem } function mapNumberToStop(value: number): TValue { - const stops = toValue(props.stops); + const stops = getStops(); return stops?.length ? stops[value] : (value as TValue); } @@ -180,7 +180,7 @@ export function useSlider(_props: Reactivify, 'schem return stop || undefined; } - const stops = toValue(props.stops); + const stops = getStops(); if (stops?.length) { const idx = stops.findIndex(s => isEqual(s, stop)); @@ -202,6 +202,10 @@ export function useSlider(_props: Reactivify, 'schem return stop as number; } + function getStops() { + return toValue(props.stops); + } + function setThumbValue(idx: number, value: number) { if (!isMutable()) { return; @@ -273,11 +277,11 @@ export function useSlider(_props: Reactivify, 'schem const { min, max } = getSliderRange(); const value = percent * (max - min) + min; - return toNearestMultipleOf(value, getSliderStep(), !!toValue(props.stops)); + return toNearestMultipleOf(value, getSliderStep(), !!getStops()); } function getSliderRange() { - const stops = toValue(props.stops); + const stops = getStops(); if (stops?.length) { return { min: 0, max: stops.length - 1 }; } @@ -299,7 +303,7 @@ export function useSlider(_props: Reactivify, 'schem } function getSliderStep() { - const stops = toValue(props.stops); + const stops = getStops(); if (stops?.length) { return 1; } diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue index 62029cc2..d1d168a7 100644 --- a/packages/playground/src/App.vue +++ b/packages/playground/src/App.vue @@ -43,7 +43,7 @@ const stops: Step[] = ['One', 'Two', 'Three']; {{ value }} - +xx