panelui-native 0.41.0 → 0.44.0

package/src/components/section-rail/index.tsx

@@ -62,6 +62,14 @@ const BAR_LEVEL_STEP = 4;
 const BAR_ACTIVE_EXTRA = 8;
 /** Indent per level in the expanded panel. */
 const ITEM_INDENT = 12;
+/**
+ * How wide the panel may grow by default. A row spends at least 40pt on
+ * indent, padding and the panel's own border before any text, so a tighter cap
+ * than this truncates ordinary section titles on a narrow phone.
+ */
+const PANEL_MAX_WIDTH = '78%' as const;
+/** …and a floor, so a rail with one short section still opens a readable panel. */
+const PANEL_MIN_WIDTH = 200;
 
 export type SectionRailPlacement = 'left' | 'right';
 export type SectionRailAlign = 'center' | 'top' | 'bottom';
@@ -327,6 +335,13 @@ function SectionRailBar({ className, value, level = 0 }: SectionRailBarProps) {
 
 export interface SectionRailContentProps extends ViewProps {
   className?: string;
+  /**
+   * How wide the panel may grow, as a fraction of the screen or a point width.
+   * The default leaves room for the rail and the edge it is anchored to; raise
+   * it for a screen whose section titles are long enough to be worth wrapping
+   * rather than truncating.
+   */
+  maxWidth?: number | `${number}%`;
   children: ReactNode;
 }
 
@@ -334,7 +349,12 @@ export interface SectionRailContentProps extends ViewProps {
  * The expanded panel. Mounted through a portal so it floats over everything,
  * and unmounted after it fades out rather than left behind hidden.
  */
-function SectionRailContent({ className, children, ...props }: SectionRailContentProps) {
+function SectionRailContent({
+  className,
+  maxWidth = PANEL_MAX_WIDTH,
+  children,
+  ...props
+}: SectionRailContentProps) {
   const context = useSectionRail('SectionRail.Content');
   const { open, close, placement, align } = context;
   const insets = useSafeAreaInsets();
@@ -366,7 +386,7 @@ function SectionRailContent({ className, children, ...props }: SectionRailConten
           }}
           pointerEvents="box-none"
         >
-          <SectionRailPanel className={className} {...props}>
+          <SectionRailPanel className={className} maxWidth={maxWidth} {...props}>
             {children}
           </SectionRailPanel>
         </Animated.View>
@@ -380,7 +400,12 @@ function SectionRailContent({ className, children, ...props }: SectionRailConten
  * view as the entering/exiting fade — Reanimated will let a layout animation
  * overwrite an animated style that touches the same property.
  */
-function SectionRailPanel({ className, children, ...props }: SectionRailContentProps) {
+function SectionRailPanel({
+  className,
+  maxWidth = PANEL_MAX_WIDTH,
+  children,
+  ...props
+}: SectionRailContentProps) {
   const { placement } = useSectionRail('SectionRail.Content');
   const slide = useSharedValue(0);
 
@@ -398,10 +423,14 @@ function SectionRailPanel({ className, children, ...props }: SectionRailContentP
 
   return (
     <Animated.View
-      style={style}
+      // The cap is a style rather than a class so it can be a prop: a screen
+      // whose sections are called "Shipping and returns" needs more room than
+      // one whose sections are called "Specs", and a `className` override would
+      // be fighting the class already here rather than replacing it.
+      style={[style, { maxWidth, minWidth: PANEL_MIN_WIDTH }]}
       accessibilityRole="menu"
       className={cn(
-        'max-w-[60%] gap-0.5 rounded-2xl border border-border bg-popover p-2 shadow-lg',
+        'gap-0.5 rounded-2xl border border-border bg-popover p-2 shadow-lg',
         className
       )}
       {...props}
@@ -432,9 +461,11 @@ function SectionRailItem({ className, value, level = 0, children }: SectionRailI
       accessibilityRole="menuitem"
       accessibilityState={{ selected }}
       onPress={() => onValueChange?.(value)}
-      style={{ paddingLeft: 12 + level * ITEM_INDENT }}
+      // `paddingStart`, not `paddingLeft`: the indent has to fall on the same
+      // side as the bar it belongs to, which is the trailing edge under RTL.
+      style={{ paddingStart: 12 + level * ITEM_INDENT }}
       className={cn(
-        'rounded-lg py-2 pe-3 active:bg-accent',
+        'rounded-lg py-2 pe-2.5 active:bg-accent',
         selected && 'bg-accent',
         className
       )}
@@ -443,7 +474,10 @@ function SectionRailItem({ className, value, level = 0, children }: SectionRailI
         size="sm"
         weight={selected ? 'medium' : 'normal'}
         className={selected ? 'text-foreground' : 'text-muted-foreground'}
-        numberOfLines={1}
+        // Two lines rather than one: a long section title is worth wrapping,
+        // and an ellipsis in a navigator hides the very word that tells you
+        // which section you are about to jump to.
+        numberOfLines={2}
       >
         {children}
       </Text>

package/src/components/slider/index.tsx

@@ -1,5 +1,5 @@
 /**
- * Slider — a value picker driven by a single thumb.
+ * Slider — a value picker driven by a thumb, or a span picked by two.
  *
  * The thumb is a pill exactly as tall as the track rather than a disc floating
  * over it. That is a deliberate shape choice and it is also the robust one: a
@@ -16,9 +16,16 @@
  *
  * ```tsx
  * <Slider label="Volume" showValue defaultValue={30} />
+ *
+ * <Slider label="Price" showValue defaultRange={[20, 80]} />
  * ```
  *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * A range is a second pair of props rather than a tuple in the first, so a
+ * one-thumb slider's `onValueChange` still hands back a plain number and
+ * nobody has to narrow a union to read it.
+ *
+ * Works controlled (`value`/`range` with their change handlers) or uncontrolled
+ * (`defaultValue`/`defaultRange`).
  */
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import {
@@ -103,16 +110,32 @@ export interface SliderProps extends Omit<SliderVariantProps, 'disabled'> {
   value?: number;
   /** Starting value when uncontrolled. */
   defaultValue?: number;
+  /**
+   * Controlled span, as `[low, high]`. Passing this — or `defaultRange` — gives
+   * the slider two thumbs and fills between them instead of from the start.
+   */
+  range?: [number, number];
+  /** Starting span when uncontrolled, as `[low, high]`. */
+  defaultRange?: [number, number];
   /** Lower bound. */
   min?: number;
   /** Upper bound. */
   max?: number;
   /** Snap granularity. The value is always a multiple of `step` from `min`. */
   step?: number;
+  /**
+   * How many steps the two thumbs must stay apart on a range slider. `0` lets
+   * them meet; `1` keeps a step between them, so the span is never empty.
+   */
+  minStepsBetweenThumbs?: number;
   /** Fires on every change while dragging — cheap updates only. */
   onValueChange?: (value: number) => void;
   /** Fires once when the gesture ends — the place for expensive side effects. */
   onValueCommit?: (value: number) => void;
+  /** The range equivalent of `onValueChange`. Only fires on a range slider. */
+  onRangeChange?: (range: [number, number]) => void;
+  /** The range equivalent of `onValueCommit`. Only fires on a range slider. */
+  onRangeCommit?: (range: [number, number]) => void;
   disabled?: boolean;
   /**
    * Render the platform's own slider instead of this one. Requires the
@@ -121,6 +144,9 @@ export interface SliderProps extends Omit<SliderVariantProps, 'disabled'> {
    * **Theme tokens do not apply** — the platform draws the control, so
    * `color`, `size` and the slot classNames are ignored. `label` and
    * `showValue` still render the caption row above it, since that is ours.
+   *
+   * **Ignored on a range slider.** Neither platform ships a two-thumb slider,
+   * so a range draws ours rather than quietly losing a thumb.
    */
   native?: boolean;
   /** Caption above the track. Also becomes the accessibility label. */
@@ -157,6 +183,9 @@ function snap(value: number, min: number, max: number, step: number) {
   return clampJS(stepped, min, max);
 }
 
+/** Which thumb a drag has hold of. A one-thumb slider only ever has `high`. */
+type Thumb = 'low' | 'high';
+
 export const Slider = forwardRef<View, SliderProps>(
   (
     {
@@ -168,11 +197,16 @@ export const Slider = forwardRef<View, SliderProps>(
       knobClassName,
       value: valueProp,
       defaultValue = 0,
+      range: rangeProp,
+      defaultRange,
       min = 0,
       max = 100,
       step = 1,
+      minStepsBetweenThumbs = 0,
       onValueChange,
       onValueCommit,
+      onRangeChange,
+      onRangeCommit,
       disabled = false,
       native,
       label,
@@ -184,13 +218,35 @@ export const Slider = forwardRef<View, SliderProps>(
     },
     ref
   ) => {
+    // Whether there are two thumbs is decided by which props were passed, not
+    // by a flag: a slider handed `[20, 80]` is a range and there is nothing
+    // else it could be.
+    const isRange = rangeProp !== undefined || defaultRange !== undefined;
+
     const isControlled = valueProp !== undefined;
     const [internal, setInternal] = useState(defaultValue);
     const value = clampJS(isControlled ? valueProp! : internal, min, max);
 
+    const isRangeControlled = rangeProp !== undefined;
+    const [internalRange, setInternalRange] = useState<[number, number]>(
+      defaultRange ?? [min, max]
+    );
+    const rawRange = isRangeControlled ? rangeProp! : internalRange;
+    // Ordered as well as clamped, so a caller who passes `[80, 20]` gets the
+    // span they meant rather than a fill of negative width.
+    const low = clampJS(Math.min(rawRange[0], rawRange[1]), min, max);
+    const high = clampJS(Math.max(rawRange[0], rawRange[1]), min, max);
+
     const slots = sliderVariants({ color, size, disabled });
     const thumbWidth = THUMB_WIDTH[size ?? 'md'];
-    const nativeUI = native ? getNativeUI() : null;
+    // A platform slider has one thumb, so a range never hands off to it.
+    const nativeUI = native && !isRange ? getNativeUI() : null;
+
+    const span = max > min ? max - min : 1;
+    const toFraction = useCallback(
+      (n: number) => (max > min ? (n - min) / (max - min) : 0),
+      [min, max]
+    );
 
     // Measured on layout; the thumb travels across (trackWidth - thumbWidth) so
     // it stays inside the track at both ends.
@@ -198,10 +254,19 @@ export const Slider = forwardRef<View, SliderProps>(
     // pixel offset rather than a laid-out box multiplies through it.
     const sign = useDirectionSign();
     const trackWidth = useSharedValue(0);
-    // Fraction 0..1 that drives the fill and the thumb, animated on the UI thread.
-    const progress = useSharedValue(max > min ? (value - min) / (max - min) : 0);
-    const startProgress = useSharedValue(0);
+    /*
+     * Two fractions rather than one. `high` is the thumb every slider has, and
+     * `low` sits at 0 on a one-thumb one — so the fill below reads the same
+     * either way: from `low` to `high`, which for a single slider is the start
+     * of the track to the thumb.
+     */
+    const lowProgress = useSharedValue(isRange ? toFraction(low) : 0);
+    const highProgress = useSharedValue(isRange ? toFraction(high) : toFraction(value));
+    const dragStartLow = useSharedValue(0);
+    const dragStartHigh = useSharedValue(0);
+    const activeThumb = useSharedValue<Thumb>('high');
     const pressed = useSharedValue(0);
+    const pressedLow = useSharedValue(0);
 
     // The change handler runs on JS; keep the latest props reachable from the
     // worklet callback without re-creating the gesture on every render.
@@ -209,9 +274,21 @@ export const Slider = forwardRef<View, SliderProps>(
     changeRef.current = onValueChange;
     const commitRef = useRef(onValueCommit);
     commitRef.current = onValueCommit;
+    const rangeChangeRef = useRef(onRangeChange);
+    rangeChangeRef.current = onRangeChange;
+    const rangeCommitRef = useRef(onRangeCommit);
+    rangeCommitRef.current = onRangeCommit;
     // The last step a drag ticked on, so haptics fire once per step, not per
     // pixel of movement within it.
     const lastTick = useRef(value);
+    /*
+     * True from the moment a finger lands until it lifts. A controlled parent
+     * echoes every change straight back as a new prop, and springing the thumb
+     * onto that echo fights the finger — visibly so at a coarse `step`, where
+     * each frame would pull the knob back onto the last snapped value while the
+     * finger had already moved past it.
+     */
+    const dragging = useRef(false);
 
     const emitChange = useCallback(
       (next: number) => {
@@ -224,11 +301,25 @@ export const Slider = forwardRef<View, SliderProps>(
       commitRef.current?.(next);
     }, []);
 
+    const emitRangeChange = useCallback(
+      (next: [number, number]) => {
+        if (!isRangeControlled) setInternalRange(next);
+        rangeChangeRef.current?.(next);
+      },
+      [isRangeControlled]
+    );
+
     // Keep the animation in step with a controlled value that changes elsewhere.
     useEffect(() => {
-      const next = max > min ? (value - min) / (max - min) : 0;
-      progress.value = withSpring(next, SPRING);
-    }, [value, min, max, progress]);
+      if (isRange || dragging.current) return;
+      highProgress.value = withSpring(toFraction(value), SPRING);
+    }, [value, isRange, toFraction, highProgress]);
+
+    useEffect(() => {
+      if (!isRange || dragging.current) return;
+      lowProgress.value = withSpring(toFraction(low), SPRING);
+      highProgress.value = withSpring(toFraction(high), SPRING);
+    }, [low, high, isRange, toFraction, lowProgress, highProgress]);
 
     const onLayout = (event: LayoutChangeEvent) => {
       trackWidth.value = event.nativeEvent.layout.width;
@@ -236,7 +327,7 @@ export const Slider = forwardRef<View, SliderProps>(
 
     const commitFromProgress = useCallback(
       (p: number, commit: boolean) => {
-        const raw = min + p * (max - min);
+        const raw = min + p * span;
         const snapped = snap(raw, min, max, step);
         if (haptics && snapped !== lastTick.current) {
           lastTick.current = snapped;
@@ -245,15 +336,64 @@ export const Slider = forwardRef<View, SliderProps>(
         emitChange(snapped);
         if (commit) emitCommit(snapped);
       },
-      [min, max, step, haptics, emitChange, emitCommit]
+      [min, max, span, step, haptics, emitChange, emitCommit]
+    );
+
+    const commitRangeFromProgress = useCallback(
+      (pLow: number, pHigh: number, commit: boolean) => {
+        const next: [number, number] = [
+          snap(min + pLow * span, min, max, step),
+          snap(min + pHigh * span, min, max, step),
+        ];
+        // Either end crossing onto a new step is a step crossed — the tick is
+        // about the thumb under the finger, and only one of them is.
+        const moved = next[0] !== lastTick.current && next[1] !== lastTick.current;
+        if (haptics && moved) {
+          lastTick.current = next[0];
+          selectionTick();
+        }
+        emitRangeChange(next);
+        if (commit) rangeCommitRef.current?.(next);
+      },
+      [min, max, span, step, haptics, emitRangeChange]
     );
 
+    /** The gap the two thumbs must keep, in the same 0..1 fractions as everything else. */
+    const gap = minStepsBetweenThumbs > 0 ? (minStepsBetweenThumbs * step) / span : 0;
+
+    const setDragging = useCallback((next: boolean) => {
+      dragging.current = next;
+    }, []);
+
+    /**
+     * Which thumb a touch at `x` should take. A tie goes to whichever thumb the
+     * touch is *outside* of: with both stacked at one end, the nearer one may
+     * be the one with nowhere to go, and a range that cannot be dragged back
+     * off its own end is a broken control.
+     */
+    const pickThumb = (x: number): Thumb => {
+      'worklet';
+      const w = Math.max(trackWidth.value, 1);
+      const travel = Math.max(w - thumbWidth, 1);
+      const along = sign === 1 ? x : w - x;
+      const p = (along - thumbWidth / 2) / travel;
+      const toLow = Math.abs(p - lowProgress.value);
+      const toHigh = Math.abs(p - highProgress.value);
+      if (toLow === toHigh) return p < lowProgress.value ? 'low' : 'high';
+      return toLow < toHigh ? 'low' : 'high';
+    };
+
     const pan = Gesture.Pan()
       .enabled(!disabled)
       .hitSlop(HIT_SLOP)
-      .onBegin(() => {
-        startProgress.value = progress.value;
-        pressed.value = withSpring(1, KNOB_SPRING);
+      .onBegin((event) => {
+        runOnJS(setDragging)(true);
+        dragStartLow.value = lowProgress.value;
+        dragStartHigh.value = highProgress.value;
+        const thumb = isRange ? pickThumb(event.x) : 'high';
+        activeThumb.value = thumb;
+        if (thumb === 'low') pressedLow.value = withSpring(1, KNOB_SPRING);
+        else pressed.value = withSpring(1, KNOB_SPRING);
       })
       .onUpdate((event) => {
         const travel = Math.max(trackWidth.value - thumbWidth, 1);
@@ -263,13 +403,38 @@ export const Slider = forwardRef<View, SliderProps>(
          * without the sign the thumb runs away from the finger.
          */
         const delta = (event.translationX * sign) / travel;
-        const next = Math.min(Math.max(startProgress.value + delta, 0), 1);
-        progress.value = next;
-        runOnJS(commitFromProgress)(next, false);
+
+        if (!isRange) {
+          const next = Math.min(Math.max(dragStartHigh.value + delta, 0), 1);
+          highProgress.value = next;
+          runOnJS(commitFromProgress)(next, false);
+          return;
+        }
+
+        // Each thumb is bounded by the other rather than by the track, so they
+        // can meet but never cross — a span turned inside out would fill
+        // backwards and read as a different range entirely.
+        if (activeThumb.value === 'low') {
+          const ceiling = Math.max(highProgress.value - gap, 0);
+          const next = Math.min(Math.max(dragStartLow.value + delta, 0), ceiling);
+          lowProgress.value = next;
+          runOnJS(commitRangeFromProgress)(next, highProgress.value, false);
+        } else {
+          const floor = Math.min(lowProgress.value + gap, 1);
+          const next = Math.min(Math.max(dragStartHigh.value + delta, floor), 1);
+          highProgress.value = next;
+          runOnJS(commitRangeFromProgress)(lowProgress.value, next, false);
+        }
       })
       .onFinalize(() => {
         pressed.value = withSpring(0, KNOB_SPRING);
-        runOnJS(commitFromProgress)(progress.value, true);
+        pressedLow.value = withSpring(0, KNOB_SPRING);
+        runOnJS(setDragging)(false);
+        if (isRange) {
+          runOnJS(commitRangeFromProgress)(lowProgress.value, highProgress.value, true);
+        } else {
+          runOnJS(commitFromProgress)(highProgress.value, true);
+        }
       });
 
     const tap = Gesture.Tap()
@@ -279,52 +444,102 @@ export const Slider = forwardRef<View, SliderProps>(
         const travel = Math.max(trackWidth.value - thumbWidth, 1);
         // `event.x` is measured from the physical left edge either way, so
         // right-to-left counts back from the far end of the track.
-        const along =
-          sign === 1 ? event.x : trackWidth.value - event.x;
+        const along = sign === 1 ? event.x : trackWidth.value - event.x;
         const next = Math.min(Math.max((along - thumbWidth / 2) / travel, 0), 1);
-        progress.value = withSpring(next, SPRING);
-        runOnJS(commitFromProgress)(next, true);
+
+        if (!isRange) {
+          highProgress.value = withSpring(next, SPRING);
+          runOnJS(commitFromProgress)(next, true);
+          return;
+        }
+
+        if (pickThumb(event.x) === 'low') {
+          const bounded = Math.min(next, Math.max(highProgress.value - gap, 0));
+          lowProgress.value = withSpring(bounded, SPRING);
+          runOnJS(commitRangeFromProgress)(bounded, highProgress.value, true);
+        } else {
+          const bounded = Math.max(next, Math.min(lowProgress.value + gap, 1));
+          highProgress.value = withSpring(bounded, SPRING);
+          runOnJS(commitRangeFromProgress)(lowProgress.value, bounded, true);
+        }
       });
 
     const gesture = Gesture.Race(pan, tap);
 
-    // The fill runs under the thumb rather than up to it, so the two never show
-    // a seam between them as the thumb moves.
+    // The fill runs under both thumbs rather than up to them, so neither shows
+    // a seam against it as it moves. On a one-thumb slider `low` is 0, and this
+    // is the ordinary fill from the start of the track.
     const fillStyle = useAnimatedStyle(() => {
       const travel = Math.max(trackWidth.value - thumbWidth, 0);
-      return { width: progress.value * travel + thumbWidth };
+      return {
+        width: (highProgress.value - lowProgress.value) * travel + thumbWidth,
+        transform: [{ translateX: lowProgress.value * travel * sign }],
+      };
     });
 
     const thumbStyle = useAnimatedStyle(() => {
       const travel = Math.max(trackWidth.value - thumbWidth, 0);
       // A transform is not laid out, so Yoga does not mirror it — the thumb
       // has to travel the other way itself.
-      return { transform: [{ translateX: progress.value * travel * sign }] };
+      return { transform: [{ translateX: highProgress.value * travel * sign }] };
+    });
+
+    const lowThumbStyle = useAnimatedStyle(() => {
+      const travel = Math.max(trackWidth.value - thumbWidth, 0);
+      return { transform: [{ translateX: lowProgress.value * travel * sign }] };
     });
 
     const knobStyle = useAnimatedStyle(() => ({
       transform: [{ scale: 1 - pressed.value * (1 - KNOB_PRESSED_SCALE) }],
     }));
 
+    const lowKnobStyle = useAnimatedStyle(() => ({
+      transform: [{ scale: 1 - pressedLow.value * (1 - KNOB_PRESSED_SCALE) }],
+    }));
+
     // VoiceOver / TalkBack increment and decrement move by a single step.
-    const nudge = (dir: 1 | -1) => {
-      const next = snap(value + dir * (step || 1), min, max, step);
-      if (next === value) return;
+    const nudge = (dir: 1 | -1, thumb: Thumb = 'high') => {
+      if (!isRange) {
+        const next = snap(value + dir * (step || 1), min, max, step);
+        if (next === value) return;
+        if (haptics) {
+          lastTick.current = next;
+          selectionTick();
+        }
+        highProgress.value = withSpring(toFraction(next), SPRING);
+        emitChange(next);
+        emitCommit(next);
+        return;
+      }
+
+      const gapValue = minStepsBetweenThumbs * step;
+      const current = thumb === 'low' ? low : high;
+      const bounded =
+        thumb === 'low'
+          ? clampJS(current + dir * (step || 1), min, high - gapValue)
+          : clampJS(current + dir * (step || 1), low + gapValue, max);
+      const next = snap(bounded, min, max, step);
+      if (next === current) return;
       if (haptics) {
         lastTick.current = next;
         selectionTick();
       }
-      progress.value = withSpring(max > min ? (next - min) / (max - min) : 0, SPRING);
-      emitChange(next);
-      emitCommit(next);
+      const pair: [number, number] = thumb === 'low' ? [next, high] : [low, next];
+      (thumb === 'low' ? lowProgress : highProgress).value = withSpring(
+        toFraction(next),
+        SPRING
+      );
+      emitRangeChange(pair);
+      rangeCommitRef.current?.(pair);
     };
 
-    const onAccessibilityAction = (event: AccessibilityActionEvent) => {
-      if (event.nativeEvent.actionName === 'increment') nudge(1);
-      else if (event.nativeEvent.actionName === 'decrement') nudge(-1);
+    const accessibilityAction = (thumb: Thumb) => (event: AccessibilityActionEvent) => {
+      if (event.nativeEvent.actionName === 'increment') nudge(1, thumb);
+      else if (event.nativeEvent.actionName === 'decrement') nudge(-1, thumb);
     };
 
-    const shownValue = formatValue ? formatValue(value) : String(Math.round(value));
+    const print = (n: number) => (formatValue ? formatValue(n) : String(Math.round(n)));
+    const shownValue = isRange ? `${print(low)} – ${print(high)}` : print(value);
 
     const header =
       label || showValue ? (
@@ -371,21 +586,48 @@ export const Slider = forwardRef<View, SliderProps>(
               style={fillStyle}
               className={slots.fill({ className: fillClassName })}
             />
+
+            {isRange ? (
+              <Animated.View
+                style={[lowThumbStyle, { width: thumbWidth }]}
+                className={slots.thumb({ className: thumbClassName })}
+                accessible
+                accessibilityRole="adjustable"
+                accessibilityLabel={label ? `${label}, minimum` : 'Minimum'}
+                accessibilityState={{ disabled }}
+                accessibilityValue={{
+                  min,
+                  max: Math.round(high),
+                  now: Math.round(low),
+                  text: print(low),
+                }}
+                accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
+                onAccessibilityAction={accessibilityAction('low')}
+              >
+                <Animated.View
+                  style={lowKnobStyle}
+                  className={slots.knob({ className: knobClassName })}
+                />
+              </Animated.View>
+            ) : null}
+
             <Animated.View
               style={[thumbStyle, { width: thumbWidth }]}
               className={slots.thumb({ className: thumbClassName })}
               accessible
               accessibilityRole="adjustable"
-              accessibilityLabel={label}
+              accessibilityLabel={
+                isRange ? (label ? `${label}, maximum` : 'Maximum') : label
+              }
               accessibilityState={{ disabled }}
               accessibilityValue={{
-                min,
+                min: isRange ? Math.round(low) : min,
                 max,
-                now: Math.round(value),
-                text: shownValue,
+                now: Math.round(isRange ? high : value),
+                text: isRange ? print(high) : shownValue,
               }}
               accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
-              onAccessibilityAction={onAccessibilityAction}
+              onAccessibilityAction={accessibilityAction('high')}
             >
               <Animated.View
                 style={knobStyle}