how to fix width of changing text label of input range-CodePudding

.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.

CodePudding user response：

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>