How to align text and input?

Question

I have this code using HTML:

<div id = "right">
<br /><br /><br />

<br />Parameter 1 : 10 <input type="range" min="10" max="40" step="0.01" value="10" class="slider" id="myRange" onchange="updateValue_Parameter_1(this.value);"> 40
<input type="text" id="textInput" value="">
<script>
function updateValue_Parameter_1(val) {document.getElementById('textInput').value="Parameter 1 = "+val;}
</script>

<br />Parameter 2 : -15 <input type="range" min="-15" step="0.01" max="-9" value="-15" class="slider" id="myRange1" onchange="updateValue_Parameter_2(this.value);"> -9
<input type="text" id="textInput1" value="">
<script>
function updateValue_Parameter_2(val) {document.getElementById('textInput1').value="Parameter 2 = "+val;}
</script>

<br />  Parameter 3 : -15 <input type="range" min="-15" step="0.01" max="-9" value="-15" class="slider" id="myRange2" onchange="updateValue_Parameter_3(this.value);"> -9
<input type="text" id="textInput2" value="">
<script>
function updateValue_Parameter_3(val) {document.getElementById('textInput2').value="Parameter 3 = "+val;}
</script>

<br />Parameter 4 : 7 <input type="range" min="7" max="9" value="7" step="0.01" class="slider" id="myRange3" onchange="updateValue_Parameter_4(this.value);"> 9
<input type="text" id="textInput3" value="">
<script>
function updateValue_Parameter_4(val) {document.getElementById('textInput3').value="Parameter 4 = "+val;}
</script>

<br />Parameter 5 : -8 <input type="range" min="-8" max="-5" step="0.01" value="-8" class="slider" id="myRange4" onchange="updateValue_Parameter_5(this.value);"> -5
<input type="text" id="textInput4" value="">
<script>
function updateValue_Parameter_5(val) {document.getElementById('textInput4').value="Parameter 5 = "+val;}
</script>

<br />Parameter 6 : 0 <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="myRange5" onchange="updateValue_Parameter_6(this.value);"> 1
<input type="text" id="textInput5" value="">
<script>
function updateValue_Parameter_6(val) {document.getElementById('textInput5').value="Parameter 6 = "+val;}
</script>

<br />Parameter 7 : 100 <input type="range" min="100" max="6000" step="0.01" value="100" class="slider" id="myRange6" onchange="updateValue_Parameter_7(this.value);"> 6000
<input type="text" id="textInput6" value="">
<script>
function updateValue_Parameter_7(val) {document.getElementById('textInput6').value="Parameter 7 = "+val;}
</script>

<br />Parameter 8 : 0 <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="myRange7" onchange="updateValue_Parameter_8(this.value);"> 1
<input type="text" id="textInput7" value="">
<script>
function updateValue_Parameter_8(val) {document.getElementById('textInput7').value="Parameter 8 = "+val;}
</script>

<br />Parameter 9 : 5 <input type="range" min="5" max="20" step="0.01" value="5" class="slider" id="myRange8" onchange="updateValue_Parameter_9(this.value);"> 20
<input type="text" id="textInput8" value="">
<script>
function updateValue_Parameter_9(val) {document.getElementById('textInput8').value="Parameter 9 = "+val;}
</script>

</div>  

Which produces the following result:

And I would like to have the input of type range align to left and the input of type text align to left also but I don't know how to do this? I try with margin-left but it produces a wrong result...

Answer 1

The easiest solution would be to set a fixed width for each 'column'. That way, they will align nicely.

<label class='width1'>Parameter 1 : 10 </label>
<input class="width2 slider" type="range" min="10" max="40" step="0.01" value="10"  id="myRange" onchange="updateValue_Parameter_1(this.value);">
<span class='width3'>40</span>
<input class='width4' type="text" id="textInput" value="" >

and your css (for example)

.width1 {
 width: 100px;
}
.width2 {
width: 150px;
}
.width3 {
width: 20px;
}
.width4 {
width: 80px;
}

This way they will all align.

Otherwise, you can use display:table which will simulate a table.

Or put all the values in an HTML Table.

Or you can use Flexbox with justify-content:space-between; but this might be a bit tricky.

Answer 2

My solution: JSFiddle demo.

I used Flexbox and flex-basis to give each element its own width so they are aligned neatly. Every piece of your code is now wrapped in an element (labels for the text) so that they can be styled.

I have also cleaned up and indented the HTML so that everything is more easy to read.

Let me note that using Flex makes this responsive and you can change the fixed width of the container as you like, as well as the flex-basis which controls the distributed space over the whole width of the parent/container.

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.container {
  width: 600px;
  margin-top: 30px;
}

.line {
  display: flex;
  justify-content: space-between;
}

.line label:nth-of-type(1) {
  flex-basis: 25%;
}

.line input.slider {
  flex-basis: 25%;
}

.line label:nth-of-type(2) {
  flex-basis: 10%;
}

.line input[type=text] {
  flex-basis: 25%;
}

<div class="container">
  <div class="line">
    <label for="myRange">Parameter 1 : 10</label> 
    <input type="range" min="10" max="40" step="0.01" value="10" class="slider" id="myRange" onchange="updateValue_Parameter_1(this.value);"> 
    <label>40</label>
    <input type="text" id="textInput" value="">
    <script>
      function updateValue_Parameter_1(val) {
        document.getElementById('textInput').value = "Parameter 1 = " + val;
      }
    </script>
   </div>

   <div class="line">
    <label for="myRange1">Parameter 2 : -15 </label>
    <input type="range" min="-15" step="0.01" max="-9" value="-15" class="slider" id="myRange1" onchange="updateValue_Parameter_2(this.value);">
    <label>-9</label>
    <input type="text" id="textInput1" value="">
    <script>
      function updateValue_Parameter_2(val) {
        document.getElementById('textInput1').value = "Parameter 2 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange2">Parameter 3 : -15 </label>
    <input type="range" min="-15" step="0.01" max="-9" value="-15" class="slider" id="myRange2" onchange="updateValue_Parameter_3(this.value);">
    <label>-9</label>
    <input type="text" id="textInput2" value="">
    <script>
      function updateValue_Parameter_3(val) {
        document.getElementById('textInput2').value = "Parameter 3 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange3">Parameter 4 : 7 </label>
    <input type="range" min="7" max="9" value="7" step="0.01" class="slider" id="myRange3" onchange="updateValue_Parameter_4(this.value);">
    <label>9</label>
    <input type="text" id="textInput3" value="">
    <script>
      function updateValue_Parameter_4(val) {
        document.getElementById('textInput3').value = "Parameter 4 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange4">Parameter 5 : -8 </label>
    <input type="range" min="-8" max="-5" step="0.01" value="-8" class="slider" id="myRange4" onchange="updateValue_Parameter_5(this.value);">
    <label>-5</label>
    <input type="text" id="textInput4" value="">
    <script>
      function updateValue_Parameter_5(val) {
        document.getElementById('textInput4').value = "Parameter 5 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange5">Parameter 6 : 0 </label>
    <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="myRange5" onchange="updateValue_Parameter_6(this.value);">
    <label>1</label>
    <input type="text" id="textInput5" value="">
    <script>
      function updateValue_Parameter_6(val) {
        document.getElementById('textInput5').value = "Parameter 6 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange6">Parameter 7 : 100</label>
    <input type="range" min="100" max="6000" step="0.01" value="100" class="slider" id="myRange6" onchange="updateValue_Parameter_7(this.value);">
    <label>6000</label>
    <input type="text" id="textInput6" value="">
    <script>
      function updateValue_Parameter_7(val) {
        document.getElementById('textInput6').value = "Parameter 7 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange7">Parameter 8 : 0</label> 
    <input type="range" min="0" max="1" step="0.01" value="0" class="slider" id="myRange7" onchange="updateValue_Parameter_8(this.value);">
    <label>1</label>
    <input type="text" id="textInput7" value="">
    <script>
      function updateValue_Parameter_8(val) {
        document.getElementById('textInput7').value = "Parameter 8 = " + val;
      }
    </script>
  </div>

  <div class="line">
    <label for="myRange8">Parameter 9 : 5</label> 
    <input type="range" min="5" max="20" step="0.01" value="5" class="slider" id="myRange8" onchange="updateValue_Parameter_9(this.value);">
    <label>20</label>
    <input type="text" id="textInput8" value="">
    <script>
      function updateValue_Parameter_9(val) {
        document.getElementById('textInput8').value = "Parameter 9 = " + val;
      }
    </script>
  </div>
</div>