Feature Request: Play/Pause Button

[alexandergerber]

I would really like to have an optional play/pause button for the sliders.
Would that be within the scope of your project?

[johnwalley]

I'd say it's outside the scope of the project. I see it being made up of two parts:

1. ui controls for play/pause
2. functionality to repeatedly update the value of the slider when it is in the 'play' state

That said, I think it would make a good example/demo. I've got no immediate plans to add any new examples but I will update this issue if I do get around to it.

If you wanted to have a go yourself, perhaps as a codepen, I'd be happy to provide assistance.

[geohuz]

I'm wondering except for setting value (slider.value(x)) to make the slider changes, is there any api to tell the slider step into next point according to the setup? (Eg, we have set min, max, and step, now we just call sth to make it forward or backward?) We need API interacts with programmatic controls the slider.

[johnwalley]

Hi @geohuz and thanks for the question. You are right in saying that the only way to currently do this is to set the slider value explicitly. I don't have any current plans to add a method to to step to the next (or previous point).

However, I'll finally get around to putting together an example of doing this in the next week or so.

[johnwalley]

I've started work on an example in this PR #127

[geohuz]

This is awesome! Can we use it for now?

[johnwalley]

Yes, feel free to use the code. I'll also merge the PR this weekend.

[geohuz]

hi @johnwalley would you give me a link for the example code? I could't find it any where, thanks

[johnwalley]

https://github.com/johnwalley/d3-simple-slider/pull/168/files

Still in the PR for now :)

[geohuz]

Hi @johnwalley thanks for the demo, I've tried to wrap the player into react component, but I found the marker don't move, only the fill progress. Would you mind help me to fix the issue? Here is the link on code sandbox: https://codesandbox.io/s/optimistic-brook-l09pp?file=/src/App.js

Thanks

[johnwalley]

You could do something like this: https://codesandbox.io/s/angry-river-gldvt.

They key is to avoid getting into an infinite loop (user moves handle -> call setPosition -> set value on slider -> call setPosition ->...) which is where slientValue helps.

[geohuz]

@johnwalley appreciate it so much! problem solved!