CODEWITHSUNDEEP
csshtml
Nasser
Nasser

Reputation: 13173

how to align a slider (input type range) with the text to its right for its value?

What would be the simplest way to align a slider with the value of the slider which is on its right? Without using external library. Just using HTML5? Do I need to use CSS for this? How?

updateTextInput('0');

function updateTextInput(val) {
  document.getElementById('amount').value = val; //update current slider value
  // do other action here
}
<input type="range" id="rangeInput" name="rangeInput" min="0" max="100" value="0" step="1" oninput="updateTextInput(this.value);">
<output name="amount" id="amount" for="rangeInput">0</output>

When running the above, the output (on Chrome on windows looks like)

Mathematica graphics

You can see the number is not aligned horizontally well with the slider. It should be a little higher.

I know there are many ways to align things in CSS and HTML. But I am not sure with a slider like this what would be the best way to go about it.

ps. sorry do not know how to make a "JSFiddle" yet.

Upvotes: 6

Views: 4833

Answers (3)

Bhuwan
Bhuwan

Reputation: 16855

The input and output both are inline elements which are aligned to baseline by default...

...so set vertical-align:middle to both to align them vertically center

Stack Snippet

updateTextInput('0');

function updateTextInput(val) {
  document.getElementById('amount').value = val; //update current slider value
  // do other action here
}
input,
output {
  vertical-align: middle;
}
<input type="range" id="rangeInput" name="rangeInput" min="0" max="100" value="0" step="1" oninput="updateTextInput(this.value);">
<output name="amount" id="amount" for="rangeInput">0</output>

Upvotes: 2

Muhammad Sahil khan
Muhammad Sahil khan

Reputation: 1

You can use a parent div for input rang and output the and this parent div element should be position: relative and output element should be position: absolute with these properties position: absolute; right: 0px; top: 5px; you can set top position according you what your need. Your input rang width should be 90% or what do you want according to your query.

Upvotes: 0

harish durga
harish durga

Reputation: 524

just add below two css properties for both the elements.

input,output{display: inline-block;
vertical-align: middle;}
<!doctype html>
<html>
<body>

    <input type="range" id="rangeInput" name="rangeInput"
           min="0" max="100" value="0" step="1" data-show-value="true"
           oninput="updateTextInput(this.value);">

    <output name="amount" id="amount" for="rangeInput">0</output>
    <BR>
<script>
    updateTextInput('0');

    function updateTextInput(val)
    {
      document.getElementById('amount').value=val; //update current slider value
      // do other action here
    }
</script>

</body>
</html>

Upvotes: 6

Related Questions