Function Slider

components/dash-core-components/src/components/Slider.tsx:17–89

({
    updatemode = 'mouseup',
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persisted_props = [PersistedProps.value],
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persistence_type = PersistenceTypes.local,
    // eslint-disable-next-line no-magic-numbers
    verticalHeight = 400,
    step = undefined,
    allow_direct_input = true,
    setProps,
    value,
    drag_value,
    ...props
}: SliderProps)

 * A slider component with a single handle.
 */
export default function Slider({
    updatemode = 'mouseup',
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persisted_props = [PersistedProps.value],
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persistence_type = PersistenceTypes.local,
    // eslint-disable-next-line no-magic-numbers
    verticalHeight = 400,
    step = undefined,
    allow_direct_input = true,
    setProps,
    value,
    drag_value,
    ...props
}: SliderProps) {
    // This is actually a wrapper around a RangeSlider.
    // We'll modify key `Slider` props to be compatible with a Range Slider.

    // Some considerations for the default value of `step`:
    // If the range consists of integers, default to a value of `1`
    // Otherwise, leave it undefined
    if (
        typeof step === 'undefined' &&
        Number.isInteger(props.min) &&
        Number.isInteger(props.max)
    ) {
        step = 1;
    }

    const mappedValue: RangeSliderProps['value'] = useMemo(() => {
        return typeof value === 'number' ? [value] : value;
    }, [value]);

    const mappedDragValue: RangeSliderProps['drag_value'] = useMemo(() => {
        return typeof drag_value === 'number' ? [drag_value] : drag_value;
    }, [drag_value]);

    const mappedSetProps: RangeSliderProps['setProps'] = useCallback(
        newProps => {
            const {value, drag_value} = newProps;
            const mappedProps: Partial<SliderProps> = omit(
                ['value', 'drag_value', 'setProps'],
                newProps
            );
            if ('value' in newProps) {
                mappedProps.value = value ? value[0] : value;
            }
            if ('drag_value' in newProps) {
                mappedProps.drag_value = drag_value
                    ? drag_value[0]
                    : drag_value;
            }

            setProps(mappedProps);
        },
        [setProps]
    );