Indication for focus

[Vishal1419]

I have checked the documentation and other issues, but unfortunately I cannot find any way to add box-shadow or change color of the handle when there is a focus on the handle. I am using slider in single handle mode.

Is there any way to achieve this?

[B-l-u-e-b-e-r-r-y]

I try to override the global style, it works:

.rc-slider-handle-dragging {
    box-shadow: 0 0 0 5px red !important;
}

[MegaKeegMan]

Yeah this is not amazing. I decided to add a class directly to the slider instead of the handle, and target the focus-within pseudo-class so that my slider has a ring around it whenever there is a focus on the handle. This was particularly preferable in my case, since I am using tailwind and wanted to avoid creating a custom class.

[HughParsons]

If you don't want to restrict the color you can clone the handle within handleRender allowing you to change styling dynamically (classNames might be possible too but typescript didn't like it since they aren't defined on the HandleProps interface and thus you can't extract them to preserve them):

const draggingShadowStyle = "0 0 4px 2px #f80000";

const handleRender: SliderProps["handleRender"] = (node, nodeProps) => {
    return (
        <div 
            {...node.props}
            style={
                nodeProps.dragging 
                    ? { ...node.props.style, boxShadow: draggingShadowStyle}
                    : node.props.style
            }
    );
}

[AlfredMadere]

Where did you find the documentation that shows you how to use handleRender?

[HughParsons]

Where did you find the documentation that shows you how to use handleRender?

Not too sure to be honest. I think I just went off the types in ~~slider.d.ts~~. Edit: sorry I meant Slider.tsx

[AlfredMadere]

Gotcha, do you know if there is a similar way to modify the individual sections of the track?

For example, if I have 5 handles and I want to add distinct text to the track between two of the handles, is there a way to do this?

[HughParsons]

If you check out Slider.tsx there isn't a corresponding render prop for the track.

However, for that specific example you could have some shared state/object store refs or position information for each of the handles (updating within handleRender) and then use that information to calculate the position for the text.