Slider: ghost knob

[danielkaxis]

When continuously saving to an api while dragging the slider, some requests can take a while before seeing visible changes. I wonder if we can implement a ghost knob or something similiar that is displaying the actual value/position.

Workflow could be something like
-> Save value
-> Get data from a subscription
-> The standard knob is displaying the value we saved
-> The ghost knob is displaying the subscription data
-> The ghost knob disappears when reaching the standard knob position

[lekoaf]

Wouldn't the answer to this lie in your own code?

Save the value to a state and debounce api saving?

const MyComponent = ({ initalValueFromApi }) => {
  const [value, setValue] = useState(initalValueFromApi)

  const changeCb = useCallback((val) => {
    setValue(val)

    const timeout = setTimeout(() => {
      // save to api
    }, 500)
  }, [])

  return <Slider value={value} onChange={changeCb} />
}

Not complete code, but you get the gist of it.

[danielkaxis]

Sorry, I meant more like this. It can be some mechanics that needs time to reach the value that we saved. That would mean creating that ghost knob. But the user gets feedback that something is happening.

[boilund]

Material UI has two kinds of onChange props. If we implement this as well then the feature can be interesting.