Make two html range inputs side by side without gap and occupy fill parent div width

Question

How to make the range inputs side by side - without any gap between them and occupy full width of the AgeRangeDiv

.AgeRange {
  width: 30%;
  margin-bottom: 20px;
}
.pl2 {
padding-left: 10px;
}
.AgeNum {
  position: relative;
  top: 20px;
  right: 23%;
}
.AgeRangeLabel {
  margin: 10px 0;
  color:#0b867a;
}
.AgeRangeDiv {
  border: 1px solid $ee;
  background: $ff;
  padding: 3px 5px 5px 12px;
  border-radius: 4px;
}

<div class="AgeRangeDiv"><div class="AgeRangeLabel">Age Range</div><input type="range" min="18" max="55" label="Min" value="39" class="AgeRange"><span class="AgeNum"><span class="text-mute">Min</span><span class="text-success text-bold pl2">39</span></span><input type="range" min="39" max="55" label="Max" value="" class="AgeRange"><span class="AgeNum"><span class="text-mute">Max</span><span class="text-success text-bold pl2">48</span></span></div>

score 1 · Accepted Answer · answered Sep 14 '18 at 03:18

1

I made some changes on the layout structure and css to achieve it. Please see below snippet:

.AgeRange {
  width: 30%;
  margin-bottom: 20px;
}
.pl2 {
padding-left: 10px;
}
.AgeNum {
  position: relative;
  display: block;
  text-align: center;
}
.AgeRangeLabel {
  margin: 10px 0;
  color:#0b867a;
}
.AgeRangeDiv {
  border: 1px solid $ee;
  background: $ff;
  padding: 3px 5px 5px 12px;
  border-radius: 4px;
}
.ranges-container {
  display: flex;
}
.ranges-container .range {
  width: 50%;
}
.ranges-container .range input[type="range"] {
  width: 100%;
}

<div class="AgeRangeDiv">
  <div class="AgeRangeLabel">Age Range</div>
  <div class="ranges-container">
    <div class="range">
      <input type="range" min="18" max="55" label="Min" value="39" class="AgeRange">
      <span class="AgeNum">
        <span class="text-mute">Min</span>
        <span class="text-success text-bold pl2">39</span>
      </span>
    </div>
    <div class="range">
      <input type="range" min="39" max="55" label="Max" value="" class="AgeRange">
      <span class="AgeNum">
        <span class="text-mute">Max</span>
        <span class="text-success text-bold pl2">48</span>
      </span>
    </div>
  </div>
</div>

answered Sep 14 '18 at 03:18

Chaska

3,165
1
11
17

Works great. Thanks much – AZSWQ Sep 14 '18 at 03:27
This is a different question but since you have the code - Is it possible to color between the two sliders ? – AZSWQ Sep 14 '18 at 03:29
What's mean by _to color between the two sliders_ ? – Chaska Sep 14 '18 at 03:54
Please see this question which has an image - https://stackoverflow.com/questions/52324611/color-between-slider-handles-or-two-side-by-side-html-ranges – AZSWQ Sep 14 '18 at 03:58
I guess you are gonna create a range slider which can define min and max values. A single HTML range input cannot do that. Rather than using two input elements, I suggest you consider some jQuery plugins eg: https://seiyria.com/bootstrap-slider/ – Chaska Sep 14 '18 at 04:04
I am using this in a React App and everything I need is working except for the color between handles. In reactjs, I am able to assign the right slider a min value of the max of left slider. Just need the css to make the oart between them colored. I wont use jQuery for React App. Thanks – AZSWQ Sep 14 '18 at 04:07
Please take a look at this: https://stackoverflow.com/questions/18389224. Some javascript and CSS may be required. – Chaska Sep 14 '18 at 04:15

Make two html range inputs side by side without gap and occupy fill parent div width

1 Answers1