垂直範囲入力スライダー: 方向と互換性

Web 開発の世界では、スライダーを垂直に表示すると、ユーザー エクスペリエンスが向上し、特定のレイアウトに対応できます。 。この記事では、ブラウザの互換性と最新の実装を考慮して、HTML5 スライダーで垂直方向を実現する手法を検討します。

当初、スライダー要素の高さと幅を調整すると、サポートされているブラウザで自動垂直方向をトリガーします。しかし、テストの結果、この方法はもはや信頼できないことが判明し、開発者は代替ソリューションを模索することになります。

最新のアプローチ

現在のバージョンの Chrome と Firefox では、最も効率的なソリューションです。これには、書き込みモードと方向プロパティの利用が含まれます:

input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
}

writing-mode をvertical-lr (またはvertical-rl) に設定すると、書き込み方向が反転します。一方、direction: rtl (右から左) に設定すると、標準の規則に従い、上にスライドすると値が減少します。

レガシー ブラウザのサポート

古いバージョンの Chrome およびその他の Chromium ベースのブラウザの場合:

input[type=range] {
    appearance: slider-vertical;
    width: 16px;
}

外観の適用: slider-vertical は垂直方向を強制し、固定幅を設定すると、最新のブラウザで使用されるデフォルトの幅と一致します。

Firefox の互換性

古いバージョンの Firefox の場合:

html {
    orient: vertical;
}

orient 属性を 要素に追加すると、ページ上のすべてのスライダーが垂直方向になります。

要約すると、これらの手法は、 スライダーを垂直に配置することで、さまざまなブラウザーで最適なユーザー エクスペリエンスと視覚的な魅力を確保します。