2

I have a range input slider with text either side that I would like to align differently.

Ideally I don't want to change the text size if I can help it, but would consider it as a last resort (I have tried already tried it and it didn't work).

Also, I have already tried the suggestions as outlined in this question: CSS: How to align vertically a "label" and "input" inside a "div"?

Here is my html:

  <div>
    <span class="slider-left"><span id="slider-reset" class="slider-reset">Label</span></span><span class="slider-center"><input id="slider" class="slider" type="range" min="0" max="100" value="100"></span><span id="slideroutput" class="slider-output slider-right"></span>
  </div>

and my css:

.slider-left {
width: 75px;
text-align: right;
margin-right: 10px;
float: left;
}

.slider-center, .slider {
width: 170px;
}

.slider-right {
width: 50px;
text-align: left;
margin-left: 10px;
float: right;
}

and this is how it looks:

screenshot of slider with text in need of vertical alignment

As you can see, the text feels like it's a few pixels too high up compared to the slider, the centre of which appears to be aligned to the bottom of the text. I would like the horizontal centre of the slider bar to be aligned with the horizontal centre of the text.

Thanks in advance!

2
  • Hi @DacreDenny I'm using Ubuntu. Thanks! Feb 16, 2019 at 22:26
  • Hi @Josef no problems - I've just posted an answer that should resolve the vertical alignment issue regardless of the font being used. Does that help? Feb 16, 2019 at 22:29

1 Answer 1

4

Consider using flexbox to resolve the vertical alignment issue as outlined below:

.slider {
  /* Use flexbox for slider wrapper element */
  display:flex;
  /* Direct alignment of content along horizontal axis */
  flex-direction:row;
  /* Tell's flexbox to center content around the non-horizontal axis (ie around the vertical axis) */
  align-items:center;
}

.slider-label {
  width:75px; 
}

.slider-input {
  /* Causes the input element to horizontally stretch to fill in available horizontal space */
  flex:1;
}

.slider-value {
  width: 100px;
}
<div class="slider">
  <span class="slider-label">Label</span>
  <input id="slider" class="slider-input" type="range" min="0" max="100" value="100" />
  <span id="slideroutput" class="slider-value">100</span>
</div>

To get a better feel for how flexbox works, you might find these interactive playgrounds helpful:

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.