feat(slider): slider with indicator props

- we would like to build a custom slider with an indicator popup above
  the knob showing what the value of the slider is when pressed and
  when the knob is being moved.
- this PR adds two optional props `onPressed` and `onKnobMoved` that
  would allow us to archive this behavior in our project.

Author: Brian Ochan

packages/core/src/Slider/index.tsx

@@ -302,6 +302,14 @@ export interface SliderProps extends BaseProps {
    * Configuration for displaying ticks in the slider
    */
   readonly tickConfig?: TickConfig
+  /**
+   * Executes JavaScript when a user presses the knob
+   */
+  readonly onPressed?: (pressed: boolean) => void
+  /**
+   * Returns the current knob position in the X-axis
+   */
+  readonly onKnobMove?: (value: number) => void
 }
 
 export const Meta = styled.div`
@@ -334,6 +342,8 @@ export const Slider: FC<SliderProps> = ({
   onPointerDown,
   onPointerUp,
   onFocus,
+  onPressed,
+  onKnobMove,
   tickConfig = {
     ticks: [],
   },
@@ -357,6 +367,11 @@ export const Slider: FC<SliderProps> = ({
     [max, min, value]
   )
 
+  const sliderPosition = useMemo(
+    () => fraction * sliderWidth,
+    [fraction, sliderWidth]
+  )
+
   // Generate the ticks with its position along the x-axis
   const tickMarkers = useMemo(
     () =>
@@ -441,6 +456,16 @@ export const Slider: FC<SliderProps> = ({
     }
   }, [handleClick, pressed])
 
+  // Trigger callback when the knob is moved along the X-axis
+  useEffect(() => {
+    onKnobMove?.(sliderPosition)
+  }, [sliderPosition])
+
+  // Trigger callback when knob is pressed
+  useEffect(() => {
+    onPressed?.(pressed)
+  }, [pressed])
+
   const getNextSnap = useCallback(
     () => snapValues.find(snapValue => snapValue > fraction),
     [snapValues, fraction]
@@ -597,9 +622,7 @@ export const Slider: FC<SliderProps> = ({
             fraction={fraction}
             pressed={pressed}
             style={{
-              transform: `translateX(-50%) translateX(${
-                fraction * sliderWidth
-              }px)`,
+              transform: `translateX(-50%) translateX(${sliderPosition}px)`,
             }}
             ref={knobRef}
           >