# スタイル済みレンジスライダーのCSS実装

> 音量調整などに使うrangeスライダーの装飾。appearance: noneでトラックとつまみを自作し、ブラウザごとの見た目の差をなくします。

- カテゴリ: フォーム
- URL: https://www.css-dictionary.com/recipes/styled-range/

## HTML

```html
<label class="volume">
  音量
  <input type="range" min="0" max="100" value="60" />
</label>
```

## CSS

```css
.volume {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.volume input {
  appearance: none;
  width: 220px;
  height: 6px;
  border-radius: 999px;
  /* 60% の位置まで塗る（value="60" に合わせたデモ用の固定値） */
  background: linear-gradient(to right, #b0413e 60%, #e2d8c2 60%);
  cursor: pointer;
}

.volume input::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #b0413e;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
}

.volume input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #b0413e;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
}

.volume input:focus-visible {
  outline: 2px solid #b0413e;
  outline-offset: 4px;
}
```

## 仕組みの解説

rangeスライダーはブラウザ標準の見た目の差が大きい部品です。appearance: none でリセットし、トラックはinput自体の背景（linear-gradientの塗り分けで進捗風に）、つまみは ::-webkit-slider-thumb と ::-moz-range-thumb の2系統に同じ装飾を書きます。この2つのベンダー擬似要素は現状まとめて書けないため、別々のルールにする必要があります。

## 実装のポイント

塗り分けを実際の値に追従させるにはJSでinputイベントを拾いCSS変数を更新します。色だけならaccent-colorが最短です。

## AIに依頼するときの文例

input type="range"のスライダーをカスタムデザインしてください。appearance: noneでリセットし、::-webkit-slider-thumbと::-moz-range-thumbの両方につまみの装飾を書き、focus-visibleのリングも付けてください。

## 使っているプロパティ

- [appearance](https://www.css-dictionary.com/property/appearance.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [box-shadow](https://www.css-dictionary.com/property/box-shadow.md)
- [pseudo-focus-visible](https://www.css-dictionary.com/property/pseudo-focus-visible.md)