how to fix width of changing text label of input range

Question

.env {
  border: 1px solid black;
  display: inline-block;
}

.knob {
  display: flex;
  background: red;
}

.knob span {
  flex: 0 0 4em;
}

<div class='env'>

  <div class='knob'>
    <span class='name'>attack</span>
    <span class='name'>0 ms</span>
    <input value='0' type='range'/>
  </div>
  
  <div class='knob'>
    <span class='name'>attack</span>
    
    <span class='name'>0.3 ms</span>
    <input value='0.3' type='range'/>
  </div>
  
  <div class='knob'>
    <span class='name'>attack</span>
    
    <span class='name'>1 ms</span>
    <input value='0' type='range'/>
  </div>
</div>

I try to give a fixed width to text aside the input range, so they don't change width as the text changes from 0 to 0.3 etc. I tried adding flex: 0 0 4em; but it makes the range out of the parent, also it still moves as the text changes.

Joel · Accepted Answer · 2022-03-21T00:20:59.817

Inputs overflow because they have a native min-width from browser's native styles.

You can remove it specifying a new value.

document.querySelectorAll('.knob').forEach((knob) => {
  const result = knob.querySelector('.js-result');
  const range = knob.querySelector('.range');

  range.addEventListener('change', () => result.innerText = range.value + ' ms');
});

.env {
  border: 1px solid black;
  display: inline-block;
}

.knob {
  display: flex;
  background: red;
}

.knob .range {
  min-width: 0;
}

.knob span {
  min-width: 4em;
}

<div class='env'>

  <div class='knob'>
    <span class='name'>attack</span>
    <span class='name js-result'>0 ms</span>
    <input class='range' value='0' type='range' step="0.1" min="0" max="5"/>
  </div>
  
  <div class='knob'>
    <span class='name'>attack</span>
    
    <span class='name js-result'>0.3 ms</span>
    <input class='range' value='0.3' type='range' step="0.1" min="0" max="5"/>
  </div>
  
  <div class='knob'>
    <span class='name'>attack</span>
    
    <span class='name js-result'>1.9 ms</span>
    <input class='range' value='1.9' type='range' step="0.1" min="0" max="10"/>
  </div>
</div>

Ok, this solves one of my problems, but if you could change the 0.3 to 0 the parent width would have changed, the red area shrink, how do I make it still even though that text changes. — eguneys, Mar 20 '22 at 23:56
Answer updated I simplified the first cols sizes by using only a `min-width` — Joel, Mar 21 '22 at 00:22

how to fix width of changing text label of input range

1 Answers1