How to set the initial/starting POSITION of the slider handle/cursor?

Question

I want to set the slider-cursor of my slider to the left at first:

How to achieve this? The sample on the w3schools starts at the middle.

Answer 1

Set the value tag to 1: value="1".

The minimum value of the slider is 1. This is defined by: min="1". When moving your slider to the most left the value will be set to 1 by your browser. To accomplish that this value will be set on initial/starting put the valuewhich is currently 50 to 1: value="1".

<input type="range" min="1" max="100" value="1" class="slider" id="myRange">

Not your question, but to be complete:

If you want to put it to the most right: You have to set the value to the maximum value available which is defined by max="100" in this case. Which means: put it to value="100".

The center of the slider is half of the max value which is in this case 50. The current value is set to 50 in your posted code snipped which sets the slider in the center on default.

Answer 2

While trying @JeroenE method on my react app. The slider did not move from the position as I had hard coded it as a certain value.

This is where defaultValue comes in.

Set your defaultValue to set your range input starting point.

W3School docs here: https://www.w3schools.com/jsref/prop_range_defaultvalue.asp