CODEWITHSUNDEEP
htmlcss
Kim
Kim

Reputation: 397

Styling the text on each side of a <input type="range"> tag

I would like to add some CSS styling to the words that are on either side of the tags.

screenshot of the finished effect

Here is my code:

<fieldset>
    <legend>Your Indicators</legend><br>
        <label for="height" class="margin">Height:</label>
        Short<input type="range" id="height" name="height" min="0" max="100">Tall<br>
        <label for="salary" class="margin">Salary:</label>
        Poor<input type="range" id="salary" name="salary" min="0" max="100">Rich
</fieldset>

Upvotes: 2

Views: 8625

Answers (4)

rajatksud
rajatksud

Reputation: 31

The easiest way is to make the left and right labels a class which can be referenced from the style block: Now the style statements are 

.left{
  text-align: center;
  width:40px;
  color:white;
  background: darkred;
  padding:3px;
}
.right{
  text-align: center;
  width:40px;
  color:white;
  background: purple;
    padding:3px;
}


     -------------HTML-------------------
<fieldset>
    <legend>Your Indicators</legend>
    <label>Height:</label>
        <label for="height" class="left">Short</label>
  <input type="range" id="height" name="height" min="0" max="100" step="1" value="81">
  <label for="height" class="right">Tall</label><br>
    <label for="salary">Salary:</label>
        <label for="salary" class="left">Low</label>
         <input type="range" id="salary" name="salary" min="0" max="100" step="1" value="18">
        <label for="salary" class="right">High</label> <br>
</fieldset> <br>

Upvotes: 1

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

You can wrap the text on either side in spans with classes, then style them by class via CSS as follows.

Live Demo:

fieldset > * {
    vertical-align: middle;
}

.leftlabel, .rightlabel {
    display: inline-block;
    width: 50px;
    padding: 2px;
    text-align: center;
}

.leftlabel {
    background-color: red;
    color: white;
}
.rightlabel {
    background-color: purple;
    color: white;
}

label {
    display: inline-block;
    width: 50px;
}
<fieldset>
    <legend>Your Indicators</legend><br>
      <label for="height" class="margin">Height:</label>
      <span class="leftlabel">Short</span>
      <input type="range" id="height" name="height" min="0" max="200" style="width: 200px">
      <span class="rightlabel">Tall</span>
      <br>
      <label for="salary" class="margin">Salary:</label>
      <span class="leftlabel">Poor</span>
      <input type="range" id="salary" name="salary" min="0" max="200" style="width: 200px">
      <span class="rightlabel">Rich</span>
  </fieldset>

JSFiddle Version: https://jsfiddle.net/sf2cz8yL/3/

Upvotes: 5

David Stanč&#237;k
David Stanč&#237;k

Reputation: 350

What about using input instead of label? :) you can easily style input, and yes, it can be textarea

Upvotes: 0

Danny B
Danny B

Reputation: 206

Try this in your css, sorry I'm on a phone so can't test first. 

label {

text-align:center;

}

Upvotes: -1

Related Questions