Question 376237 in Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    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;
}
    Login or Signup to reply.
  2. 0

    In your code:

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

    here padding is also applied to the speed slider,

    you can give padding 0 to slider than it will work.

    or add simply,

    #speedRange {
    padding: 0 !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search