chore: handle slider value changes

Author: computools-anastasiia-nahaiska

src/sliders/slider /Slider.component.tsx

@@ -18,6 +18,11 @@ export interface SliderProps extends ViewProps {
   value?: number;
   step?: number;
   centered?: boolean;
+  damping?: number;
+
+  valueHeight?: number;
+  thumbWidthActive?: number;
+  thumbWidthInactive?: number;
 
   thumbStyle?: StyleProp<ViewStyle>;
   valueStyle?: StyleProp<TextStyle>;
@@ -38,6 +43,7 @@ export const Slider: React.FC<SliderProps> = ({
 
   step,
   value = 0,
+  damping = 20,
   centered = false,
 
   thumbStyle,
@@ -48,6 +54,10 @@ export const Slider: React.FC<SliderProps> = ({
   filledTrackStyle,
   remainingTrackStyle,
 
+  valueHeight,
+  thumbWidthActive,
+  thumbWidthInactive,
+
   onChangeValue,
   onLayout,
   style,
@@ -65,7 +75,7 @@ export const Slider: React.FC<SliderProps> = ({
     remainingTrackAnimatedStyle,
     slideToTrackPoint,
     setUpSliderLayout,
-  } = useSlider({max, min, step}, value, onChangeValue);
+  } = useSlider({max, min, step, damping}, value, onChangeValue);
 
   const trackPointsJustifyContent = trackPoints.length > 1 ? 'space-between' : 'flex-end';
 
@@ -105,6 +115,9 @@ export const Slider: React.FC<SliderProps> = ({
           style={[styles.thumb, indicatorStyle]}
           thumbStyle={thumbStyle}
           valueStyle={valueStyle}
+          valueHeight={valueHeight}
+          thumbWidthActive={thumbWidthActive}
+          thumbWidthInactive={thumbWidthInactive}
         />
         <SliderTrack
           style={[{backgroundColor: secondaryContainer.background}, styles.remainingTrack, remainingTrackAnimatedStyle, remainingTrackStyle]}

src/sliders/slider /useSlider.hook.ts

@@ -1,10 +1,12 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import {Gesture} from 'react-native-gesture-handler';
 import {interpolate, runOnJS, useAnimatedProps, useAnimatedStyle, useSharedValue, withSpring, withTiming} from 'react-native-reanimated';
 
-import {type SliderConfig} from './slider-config.type';
+import {type SliderConfig} from '../slider-config.type';
+import {normalize} from '../worklets/normalize.worklet';
+import {calcTranslationXBasedOnValue} from '../worklets/calc-translationX-based-on-value.worklet';
 
-export const useSlider = ({max, min, step}: SliderConfig, value: number, onChangeValue?: (value: number) => void) => {
+export const useSlider = ({max, min, step, damping}: SliderConfig, value: number, onChangeValue?: (value: number) => void) => {
   const [sliderWidth, setSliderWith] = useState(0);
 
   const sliding = useSharedValue(0);
@@ -15,30 +17,35 @@ export const useSlider = ({max, min, step}: SliderConfig, value: number, onChang
   const filledTrackAnimatedStyle = useAnimatedStyle(() => ({flex: interpolate(thumbTranslationX.value, [0, sliderWidth], [0, 1])}), [sliderWidth]);
   const remainingTrackAnimatedStyle = useAnimatedStyle(() => ({flex: interpolate(thumbTranslationX.value, [0, sliderWidth], [1, 0])}), [sliderWidth]);
 
+  useEffect(() => {
+    adjustThumbsPosition(sliderWidth, true);
+  }, [value, sliderWidth]);
+
   const calcValueBasedOnThumbTranslationX = (translationX: number) => {
     'worklet';
 
     const valueBaseOnThumbTranslateX = Math.round(interpolate(translationX, [0, sliderWidth], [min, max]));
-    const roundedValue = step ? Math.round(valueBaseOnThumbTranslateX / step) * step : valueBaseOnThumbTranslateX;
+    const normalizedValue = normalize(valueBaseOnThumbTranslateX, step);
 
-    selectedValue.value = roundedValue;
+    selectedValue.value = normalizedValue;
 
-    return roundedValue;
+    return normalizedValue;
   };
 
   const gesture = Gesture.Pan()
     .onStart(() => {
       sliding.value = withTiming(1);
     })
     .onUpdate((e) => {
+      const currentTranslationX = Math.max(0, Math.min(Math.round(thumbTranslationXContext.value + e.translationX), sliderWidth));
+
       if (step) {
         const stepSize = (sliderWidth / (max - min)) * step;
-        const currentTranslationX = Math.max(0, Math.min(Math.round(thumbTranslationXContext.value + e.translationX), sliderWidth));
-        const stepSnap = Math.round(currentTranslationX / stepSize) * stepSize;
+        const stepSnap = normalize(currentTranslationX, stepSize);
 
         thumbTranslationX.value = stepSnap;
       } else {
-        thumbTranslationX.value = Math.max(0, Math.min(Math.round(thumbTranslationXContext.value + e.translationX), sliderWidth));
+        thumbTranslationX.value = currentTranslationX;
       }
     })
     .onEnd(() => {
@@ -52,22 +59,22 @@ export const useSlider = ({max, min, step}: SliderConfig, value: number, onChang
     });
 
   const setUpSliderLayout = (width: number) => {
-    initializeThumbPosition(width);
+    adjustThumbsPosition(width);
     setSliderWith(width);
   };
 
-  const initializeThumbPosition = (width: number) => {
-    const initialTthumbTranslationX = ((value - min) / (max - min)) * width;
+  const adjustThumbsPosition = (width: number, isUpdaing: boolean = false) => {
+    const initialTthumbTranslationX = calcTranslationXBasedOnValue({min, max}, normalize(value, step), width);
 
-    thumbTranslationX.value = initialTthumbTranslationX;
+    thumbTranslationX.value = isUpdaing ? withSpring(initialTthumbTranslationX, {damping}) : initialTthumbTranslationX;
     thumbTranslationXContext.value = initialTthumbTranslationX;
   };
 
   const slideToTrackPoint = (pointValue: number) => {
-    const thumbPointValueTranslationX = ((pointValue - min) / (max - min)) * sliderWidth;
+    const thumbPointValueTranslationX = calcTranslationXBasedOnValue({min, max}, pointValue, sliderWidth);
 
     sliding.value = withTiming(1);
-    thumbTranslationX.value = withSpring(thumbPointValueTranslationX, {damping: 20}, () => {
+    thumbTranslationX.value = withSpring(thumbPointValueTranslationX, {damping}, () => {
       sliding.value = withTiming(0);
       thumbTranslationXContext.value = thumbPointValueTranslationX;
 

src/sliders/slider /useSliderTrackPoints.hook.ts

@@ -1,4 +1,4 @@
-import {type SliderConfig} from './slider-config.type';
+import {type SliderConfig} from '../slider-config.type';
 
 export const useSliderTrackPoints = ({max, min, step, centered}: SliderConfig) => {
   const getDiscreteSliderTrackPoints = (discreteStep: number) => {