最適なブラウザサポートで垂直範囲スライダーを実現するにはどうすればよいですか?

垂直レンジ スライダー: 最適なブラウザ サポートのためのガイド

Web 開発の領域では、HTML5 レンジ スライダーは、ユーザー入力を特定の範囲内で制御します。ただし、これらのスライダーを垂直方向に揃えると、異なるブラウザ間で問題が発生する可能性があります。

高さを増やすことはできませんか?

当初は、単に高さを設定するだけでよいと考えられていました。スライダーの幅を超えると、自動的に垂直方向になります。ただし、このアプローチには制限があります:

• 古い情報: ほとんどのブラウザでは、高さを増やしても方向に影響しなくなりました。

垂直方向の変換

垂直方向に整列したレンジ スライダーを実現するには、次の点を考慮してください。ブラウザ固有の解決策:

• 最新のブラウザ (Chrome、Firefox):

  • 確立するには、書き込みモード:vertical-lr を適用します。縦書き方向。
  • 方向を使用: rtl (右から左) を上にスライドして減少させます。

• 従来の Chrome ブラウザ:

  • 外観: スライダーを垂直にして強制的に適用します。垂直方向。
  • 一致するように明示的な幅 (例: 16px) を設定します。最新のブラウザの垂直スライダーのデフォルトの幅。

• レガシー Firefox ブラウザ:

  • orient="vertical" を追加します。 " 属性を に追加します。 element.

実装例

次のコード スニペットを組み込んで、ほとんどの機能をサポートする垂直方向に整列した範囲スライダーを表示します。ブラウザ:

<code class="css">input[type=range][orient=vertical] {
    writing-mode: vertical-lr;
    direction: rtl;
    appearance: slider-vertical;
    width: 16px;
    vertical-align: bottom;
}</code>

<code class="html"><input type="range" orient="vertical"></code>

結論

これらのブラウザ固有のソリューションを利用することで、レンジ スライダーを効果的に垂直方向に向けることができ、一貫性のあるユーザー フレンドリーな入力を確保できます。さまざまなプラットフォームにわたるコントロール。

以上が最適なブラウザサポートで垂直範囲スライダーを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。