当min和max值相同时，如何将range滑块置于最大位置？

当<input type="range">的min和max值相等时，浏览器默认会把滑块thumb放在轨道中间，要让它定位到末端，可通过以下两种方式实现：

方法一：CSS伪元素直接偏移 #

针对不同浏览器的滑块伪元素，使用transform调整thumb位置。如果只想作用于min/max相等的滑块，可先给这类滑块添加专属类名（比如fixed-thumb）：

<input type="range" min=10 max=10 value=10 class="fixed-thumb">

对应的CSS代码：

/* 适配Chrome、Edge、Safari等Webkit内核浏览器 */
input[type="range"].fixed-thumb::-webkit-slider-thumb {
  transform: translateX(100%);
}

/* 适配Firefox */
input[type="range"].fixed-thumb::-moz-range-thumb {
  transform: translateX(100%);
}

注：部分浏览器的轨道可能自带内边距，若偏移后位置不准确，可微调百分比（比如改为95%）。

方法二：JavaScript动态处理 #

通过JS检测滑块的min和max属性，动态添加样式类，适合需要动态修改min/max值的场景：

const rangeInput = document.querySelector('input[type="range"]');

function fixThumbPosition() {
  const min = parseInt(rangeInput.min);
  const max = parseInt(rangeInput.max);
  if (min === max) {
    rangeInput.classList.add('fixed-thumb');
  } else {
    rangeInput.classList.remove('fixed-thumb');
  }
}

// 初始化时执行一次
fixThumbPosition();

// 监听min/max属性变化，实时调整
const observer = new MutationObserver(fixThumbPosition);
observer.observe(rangeInput, { attributes: true, attributeFilter: ['min', 'max'] });

搭配方法一中的CSS代码即可生效。

内容的提问来源于stack exchange，提问作者Arpit Shukla