import React, { Dispatch, SetStateAction } from "react"; import { StyleProp, ViewStyle, TextStyle, AccessibilityProps, Insets } from "react-native"; import { MarkerType, SliderValue, setA11yMarkerPropsFunction } from "./types"; import Label from "./Label"; import Marker from "./Marker"; export type SliderProps = AccessibilityProps & { /** The values of the sliders. If the array has two values, there will be two slider markers. */ values: SliderValueType[]; /** The minimum value of the slider scale */ min?: number; /** The maximum value of the slider scale */ max?: number; /** If `min` and `max` are defined, this is the increment between slider steps. */ increment?: number; /** Hardcode the slider step values. If this is used, `min` and `max` are ignored. */ sliderValues?: SliderValueType[]; /** Show the floating marker label over the slider marker. */ showLabel?: boolean; /** The hex color to use for the slider marker thumb. */ markerColor?: string; /** Defines how far a touch event can start away from the marker */ hitSlop?: Insets; /** The style to apply to the slider container. */ style?: StyleProp; /** The style to apply to the slider track. */ trackStyle?: StyleProp; /** The style to apply to the selected section of the slider track. */ selectedTrackStyle?: StyleProp; /** The style to apply to the floating label. */ labelStyle?: StyleProp; /** The style to apply to the floating label text. */ labelTextStyle?: StyleProp; /** The component used for the floating marker label */ labelComponent?: typeof Label; /** The component used for the marker thumb. Note, this needs to have a static `size` property. */ markerComponent?: typeof Marker; /** Fired when the slider value changes */ onChange?: ((values: SliderValueType[]) => void) | Dispatch>; /** Fired when one of the markers starts to be dragged */ onSlidingStart?: (slider: MarkerType) => void; /** Fired when one of the markers finishes being dragged */ onSlidingComplete?: (slider: MarkerType) => void; /** Customize the accessibility values */ setA11yMarkerProps?: setA11yMarkerPropsFunction; }; export default function Slider({ min, max, values, sliderValues, markerColor, showLabel, style, trackStyle, selectedTrackStyle, labelStyle, labelTextStyle, increment, hitSlop, onChange, onSlidingStart, onSlidingComplete, labelComponent, setA11yMarkerProps, markerComponent, ...accessibilityProps }: SliderProps): React.JSX.Element;