search

benhoneywill / blog

My personal website & blog.
https://benhoneywill.com
0 stars 0 forks source link

Building a Range Slider Component in React | Ben Honeywill #9

Open utterances-bot opened 2 years ago

utterances-bot commented 2 years ago

Building a Range Slider Component in React | Ben Honeywill

Let's make a custom range input component with React.

https://benhoneywill.com/building-a-range-slider-component-in-react/

viktorfilmanovich commented 2 years ago

Hello! Thank you very much!

CodeKing12 commented 1 year ago

Thank you very much! You saved me a lot of time.

Kienroro2003 commented 12 months ago

Thank you very much

aiktb commented 10 months ago

It seems difficult to style :focus-visible for this, at least I can't think of a good way, what do you think?

benhoneywill commented 1 month ago

Hey @aiktb, you'd need to rearrange the markup to do that, so that you can target the controls with a selector like this:

input:focus-visible + .control-wrapper .control {
   // ...
}

It might be a bit fiddly to get right. You could also track which control is focused by adding onFocus and onBlur handlers to the inputs and keeping track of if the controls are focused in React state.