音量調整などに使うrangeスライダーの装飾。appearance: noneでトラックとつまみを自作し、ブラウザごとの見た目の差をなくします。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
rangeスライダーはブラウザ標準の見た目の差が大きい部品です。appearance: none でリセットし、トラックはinput自体の背景（linear-gradientの塗り分けで進捗風に）、つまみは ::-webkit-slider-thumb と ::-moz-range-thumb の2系統に同じ装飾を書きます。この2つのベンダー擬似要素は現状まとめて書けないため、別々のルールにする必要があります。
塗り分けを実際の値に追従させるにはJSでinputイベントを拾いCSS変数を更新します。色だけならaccent-colorが最短です。
input type="range"のスライダーをカスタムデザインしてください。appearance: noneでリセットし、::-webkit-slider-thumbと::-moz-range-thumbの両方につまみの装飾を書き、focus-visibleのリングも付けてください。