CODEWITHSUNDEEP
htmlreactjsrange
J Atkin
J Atkin

Reputation: 3140

Continuously updated slider can't be dragged

I'm using React wrapped with cljs+reagent to make a small app. One of the things I need is a slider that updates ~every second, and that can be adjusted by the user. Right now I'm using this:

 [:div.scrubber [:input
                 {:type  "range"
                  :min   "0"
                  :max   "100"
                  :value (str percent-through)}]]

I'm adjusting the value property of the range slider every second. However, this seems to prevent user interaction with it. Here's a gif showing this: (captured on chrome)

enter image description here

What is the best way to allow the user to control the slider? Stopping the update timer does not have any effect, and it appears that the value is locked.

Upvotes: 0

Views: 214

Answers (1)

Chase DeAnda
Chase DeAnda

Reputation: 16451

Yeah if you have control over the timer I would cancel it once the user starts to interact with the slider, and then after updating state with their changes, create a new timer.

Upvotes: 2

Related Questions