垂直方向のレンジ スライダーを作成する方法: 互換性と最新のテクニックのガイド?

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

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 属性を追加します。

要素は、ページ上のすべてのスライダーの垂直方向を指示します。

要約すると、これらの技術は を表示するための信頼できる方法を提供します。スライダーを垂直に調整することで、幅広いブラウザーで最適なユーザー エクスペリエンスと視覚的な魅力を確保します。

以上が垂直方向のレンジ スライダーを作成する方法: 互換性と最新のテクニックのガイド?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。