search

TanStack / ranger

🤖 Headless utilities for building range and multi-range sliders in React, Preact, Solid, Vue, Svelte and Angular
MIT License
757 stars 65 forks source link

Add `focused` variable to each element of handles #19

Closed tuanddd closed 3 years ago

tuanddd commented 4 years ago

Hi @tannerlinsley, I'd like to add a variable (focused) to a handle so that we are able to do this:

{handles.map(({ getHandleProps, focused }) => (
  <button
    {...getHandleProps({
      style: {
        backgroundColor: focused ? "red" : "yellow",
        width: "14px",
        height: "14px",
        outline: "none",
        borderRadius: "100%",
        border: "solid 1px #888"
      }
    })}
  />
))}

Do you think this is a good idea? Thanks for the lib btw 😄