Create custom horizontal scroll bar in html

Issue

I want to create a custom scrollbar in HTML without scrolling any data. I want to allow the user to set value in a text box by moving scroll bar. I also require the amount of scroll done with javascript or jquery so I can display appropriate values in the textbox. I have linked a gif where the scrollbar is moved without data(i have done it in pygame) but is there any way by which I can do that https://i.stack.imgur.com/6oDCz.gif (example). Please give an idea if there is any tag or any easy tool by which this can be achieved. Any help regarding this would be encouraged

Solution

You are looking for the range input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

Example Plain HTML:

<div>
  <input type="range" id="volume" name="volume" min="0" max="11">
  <label for="volume">Volume</label>
</div>

If you don't mind to use a js plugin: https://rangeslider.js.org/

Answered By - yourbraineatsyou