@gluestack-ui/slider/lib/SliderFilledTrack.jsx

A universal headless slider component for React Native, Next.js & React

import React, { forwardRef } from 'react';
import { SliderContext } from './Context';
import { Platform } from 'react-native';
import { mergeRefs } from '@gluestack-ui/utils';
function SliderFilledTrack(StyledSliderFilledTrack) {
    return forwardRef(({ _experimentalSliderFilledTrack = false, _experimentalSliderFilledTrackValue = 0, style, ...props }, ref) => {
        const _ref = React.useRef(null);
        const { state, trackLayout, orientation, isDisabled, isFocused, isHovered, isPressed, isFocusVisible, } = React.useContext(SliderContext);
        const getSliderTrackPosition = () => {
            if (orientation === 'vertical') {
                return trackLayout.height * state.getThumbPercent(0);
            }
            else {
                return trackLayout.width * state.getThumbPercent(0);
            }
        };
        const sliderTrackPosition = getSliderTrackPosition();
        let positionProps = orientation === 'vertical'
            ? { height: sliderTrackPosition }
            : { width: sliderTrackPosition };
        if (_experimentalSliderFilledTrack) {
            positionProps =
                orientation === 'vertical'
                    ? { height: _experimentalSliderFilledTrackValue }
                    : { width: _experimentalSliderFilledTrackValue };
        }
        return (<StyledSliderFilledTrack {...props} ref={mergeRefs([_ref, ref])} style={[style, positionProps]} states={{
                hover: isHovered,
                disabled: isDisabled,
                focus: isFocused,
                focusVisible: isFocusVisible,
                active: isPressed,
            }} dataSet={{
                hover: isHovered ? 'true' : 'false',
                disabled: isDisabled ? 'true' : 'false',
                focus: isFocused ? 'true' : 'false',
                focusVisible: isFocusVisible ? 'true' : 'false',
                active: isPressed ? 'true' : 'false',
            }} disabled={isDisabled} tabIndex={Platform.OS === 'web' ? -1 : undefined}/>);
    });
}
export default SliderFilledTrack;