I need to make a player control for playback of history of states. The context is not important, it should basically act like in a media player. It is easy to use buttons for most functions, such as: 'play', 'next', 'previous', etc. The only part I am not sure about is the playback speed. This variable should make the simulation run faster, slower, and backwards. A dropdown is my current pick because it limits the user to set unreasonable high values. This is good and all, but it takes away the user's freedom to modify the speed in some form. The simulation could take a long time for example.

My current speed control:

enter image description here

What is a good way to control speed in an user interface, giving the user freedom to modify the value, but also making it easy to use?

  • 1
    What about a slider? Will the user need a more specific range (like every 0.5 or so)?
    – Alvaro
    Mar 6, 2017 at 20:39
  • 1
    Do the negative numbers cause the media to play backwards? If not, I would suggest using decimals instead of negative numbers – like 0.5x, 0.75x, 1x, 1.25x, 1.5x, etc. Mar 7, 2017 at 4:49

3 Answers 3


Do you feel like precise control speed are needed or nice to have?

Why do you need playback that goes backwards? If it is for navigation trough the media wouldn't progress bar serve better?


  • [+] You don't have to worry about unreasonable high values
  • [+] Easy to control on mobile devices
  • [+] Takes less space
  • [-] Less control over the playback speed


  • [+] Gives you more control over the playback speed
  • [+] You don't have to worry about unreasonable high values either
  • [-] Takes too much space
  • [-] Hard to control on mobile devices if not done correctly
  • you can put a slider with predefined steps (notches) - it would be more intuitive than a drop-down and reasonably easy to use on touch interfaces.
    – Mike
    Apr 6, 2017 at 6:52

I think a slider would be the best widget, if you're happy to go off the standard HTML input types. Most libraries have one, like bootstrap and jQuery UI.


As mentioned in comments, most speed alteration controls, specify how much the speed is altered. Either by ranges 0.5 (for slower), 1.0 (for normal), and 1.5 (for 50% higher speed). An arbitrary range would cause cognitive load on the user, and negative number range might imply backward play. The range can also be represented by percentage, but a slider control might be too heavy at use, especially on mobile devices.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.