[SOLVED] The slider button doesn't extend to the end of the line

The slider button doesn't extend to the end of the line

I'm facing an issue where the slider button doesn't extend to the end of the line. I've tried adjusting the width of the slider input, but it hasn't solved the problem. Can you please help me figure out how to make the slider button reach the end of the line?

This is the preview of the website: https://htmlpreview.github.io/?https://github.com/bogdanfeier1/hanoi-towers-project/blob/main/all-in-one.html

This is the code: https://github.com/bogdanfeier1/hanoi-towers-project/blob/main/all-in-one.html

I tried changing the width of the #speedRange, but with it everything changes in width and it didn't work.

I tried debugging it, but it still didn't work.

Solution

You should remove the padding you added to the range input :

select, input[type="range"] {
    width: 100%;
    /* padding: 8px; */
    border-radius: 5px;
    border: none;
    background-color: #222831;
    color: #eeeeee;
}

and just apply the padding to the select element only instead. Like so:

select {
    padding: 8px;
}