0から伸ばすスライダー

未加工のスライダー <input type="range"> は、端から端まで伸びますが、
マイナスからプラスの範囲を取るときには、0から伸ばしたい。

<input type="range">

css

input[type="range"] {
    appearance: none; /* ←標準のスタイルを解除します */
    width: 100%;
    height: 0.4rem;
    margin: 0;
    border: 1px solid gray;
    border-radius: 0.4rem;
    padding: 0;
    background-color: white;

    &::-webkit-slider-runnable-track {
		margin: 0 -5px; /* ←つまみが端まで行かない問題を解消します */
	}
}

javascript

const ranges = document.querySelectorAll('input[type="range"]');
const NegaColor = 'blue';
const PosiColor = 'red';
const backColor = 'white';

for (const range of ranges) {
	range.addEventListener('input', handler);
}

function handler() {

    // ゼロ点と入力値の位置(割合)を計算
	const range = this.max - this.min;
	const zero = 100 * (0 - this.min) / range;
	const ratio = 100 * (this.value - this.min) / range;

    // 0からマイナス方向へ伸ばす
    if (this.value < 0) {
		this.style.background = `linear-gradient(to right, ${backColor} ${ratio}%, ${NegaColor} ${ratio}% ${zero}%, ${backColor} ${zero}%)`;
		return;
	}

    // 0からプラス方向へ伸ばす
	if (this.value > 0) {
		this.style.background = `linear-gradient(to right, ${backColor} ${zero}%, ${PosiColor} ${zero}% ${ratio}%, ${backColor} ${ratio}%)`;
		return;
	}

    // 値が0の場合
	this.style.background = backColor;
}

<datalist>には未対応です。
appearance: none; で標準のスタイルを解除したスライダーに適用する方法は分からんかった。