CODEWITHSUNDEEP
htmlcsssliderrangecenter
shurup
shurup

Reputation: 871

How to prevent text from moving when centered and range slider value changes?

Let's say I have some HTML like this:

    <div style = "text-align: center">
      Radius: <span id = "radius">1</span><br>
      <input type="range" id="chosenRadius" oninput="updateRadius(this.value)" onchange="updateRadius(this.value)"  min="1" max="1000000" value="1" /><br>
    </div>

Whenever the slider is moved, the span updates with the current value of the slider. The div within which everything is located centers everything. How can I keep the "Radius:" text from moving at the length of the number within the span changes? I do not care if it's not exactly centered after the value of the radius increases, but as long as it is close. I would like for this setup to start out centered and then for the "radius:" text to remain fixed. Here is a simple JS bin.

Upvotes: 0

Views: 314

Answers (1)

t..
t..

Reputation: 1101

#radius {
  position: absolute;
}

this shows it: https://jsbin.com/forarasuze/1/edit?html,css,output

an absolute position will will keep it still for you

Upvotes: 2

Related Questions