私には才能がまったくありません。 私は知識に情熱を注いでいます

Article

16入力タイプ範囲の例HTMLCSS

16入力タイプ範囲の例HTMLCSS


November, 9 2021

範囲スライダーは、ユーザーが選択できる値の範囲を最小範囲と最大範囲に制限する機能です。 ユーザーが一定の金額を稼ぐ必要がある場合、eコマースサイトで非常に役立ちます。 そして、よりよく理解するために一緒に学びましょう!

入力範囲の作成方法

範囲スライダーを作成するための基本的な属性を提供するHTMLでは、属性を使用することです type = "range"。 付随する属性は次のとおりです。

  • min:ユーザーが選択できる最小値
  • max:ユーザーが選択できる最大値
  • value:デフォルト値

次に、以下の基本的なレンジャースライダーの例を見てみましょう。

See the Pen Ranger slider cơ bản by haycuoilennao19 (@haycuoilennao19) on CodePen.

私たちが見ることができる1つのポイントは、値が表示されないため、ユーザーが選択方法を知らないことです。 したがって、値を表示するには、いくつかのCSSおよびJavascriptプロパティを使用する必要があります。

HTML

<h1> Range Slider</h1>
 <p>マウスを使用して、下のスライダーをドラッグします</p>
<div class="slidecontainer">
   <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
   <p>レンジャースライダーの価値: <span id="demo"></span></p>
</div>

CSS

/*レンジスライダーのスタイルを設定する*/
 .slider {
   -webkit-appearance: none;
   width: 100%;
   height: 15px;
   border-radius: 5px;
   background: #d3d3d3;
   outline: none;
   opacity: 0.7;
   -webkit-transition: .2s;
   transition: opacity .2s;
 }
/* rangersliderのスライダーを設計します--- webkit-を使用してChrome、Opera、Safari、Edgeで実行します */
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 25px;
   height: 25px;
   border-radius: 50%;
    background: DodgerBlue;
   cursor: pointer;
 }
/* Firefoxでrangersliderを設計する */
 .slider::-moz-range-thumb {
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: #4CAF50;
   cursor: pointer;
 }

次に、値を表示するJavascriptコードを追加します。

 var slider = document.getElementById("myRange");
 var output = document.getElementById("demo");
 /* デモのIDを持つスパンタグのデフォルト値50を表示する*/
 output.innerHTML = slider.value; 
/* レンジャースライダーの現在値を更新する*/
 slider.oninput = function() {
   output.innerHTML = this.value;
 }

そして、あなたが以下に見る最終結果:

See the Pen Untitled by haycuoilennao19 (@haycuoilennao19) on CodePen.

範囲スライダーで直接価格を追加したい場合は、以下の例を確認してください。

See the Pen Price Range by onyx1812 (@onyx1812) on CodePen.

レンジスライダーライブラリ

このセクションでは、Webサイトの範囲スライダーを作成するためのライブラリをいくつか紹介します。このコンポーネントを作成するためのコードを作成する時間と労力を節約できます。

Ion.RangeSlider

 Ion.RangeSlider

リンク

rangesliderjs

 rangesliderjs

リンク

noUiSlider

 noUiSlider

リンク

roundSlider

 roundSlider

リンク

レンジスライダーの例

3Dレンジスライダー

33Dレンジスライダー

以下の結果をご覧いただけます!

See the Pen Day 5: Scalable 3D Range Sliders by Angela He (@zephyo) on CodePen.

リンク

Jquery Range Slider

Jquery Range Slider

以下の結果をご覧いただけます!

See the Pen Range Slider with Feedback by Mikey Wills (@mukealicious) on CodePen.

リンク

CSSレンジスライダー

CSSレンジスライダー

以下の結果をご覧いただけます!

See the Pen CSS Range Slider by Sean Stopnik (@seanstopnik) on CodePen.

リンク

Range Slider Jquery

Range Slider Jquery

以下の結果をご覧いただけます!

See the Pen Range slider output by Michael Wolthers Nielsen (@wolthers) on CodePen.

リンク

レンジスライダーCSSJavascript

レンジスライダーCSSJavascript

以下の結果をご覧いただけます!

See the Pen CSS Custom Range Slider by Brandon McConnell (@brandonmcconnell) on CodePen.

リンク

レンジスライダーブートストラップ

レンジスライダーブートストラップ

以下の結果をご覧いただけます!

See the Pen Two Point Range Slider by Jackie Johnston (@jackiejohnston) on CodePen.

リンク

Google Material Range Slider

Google Material Range Slider

以下の結果をご覧いただけます!

See the Pen Google Material Sliders by Leena Lavanya (@leenalavanya) on CodePen.

リンク

Range Slider SVG

Range Slider SVG

以下の結果をご覧いただけます!

See the Pen SVG Balloon Slider by Chris Gannon (@chrisgannon) on CodePen.

リンク

Slider Range Jquery

Slider Range Jquery

以下の結果をご覧いただけます!

See the Pen Budget Slider by haycuoilennao19 (@haycuoilennao19) on CodePen.

リンク

Range Slider UI HTML5

Range Slider UI HTML5

以下の結果をご覧いただけます!

See the Pen Range Slider by Kyle (@kylecasestack) on CodePen.

リンク

Jquery UI Range Slider

Jquery UI Range Slider

以下の結果をご覧いただけます!

See the Pen Gear Slider by Mariusz Dabrowski (@MarioD) on CodePen.

リンク

SVG Range Slider

SVG Range Slider

以下の結果をご覧いただけます!

See the Pen SVG Range Slider by Blake Bowen (@osublake) on CodePen.

リンク

Range Slider CoffeeScript

Range Slider  CoffeeScript

以下の結果をご覧いただけます!

See the Pen Range by Andreas Storm (@avstorm) on CodePen.

リンク

360度サークルレンジスライダー

360度サークルレンジスライダー

以下の結果をご覧いただけます!

See the Pen 360deg Circle Range Slider by sky (@skyajay) on CodePen.

リンク

レンジスライダーレスポンシブCSS3Javascript

レンジスライダーレスポンシブCSS3Javascript

以下の結果をご覧いただけます!

See the Pen Modern, Usable, Responsive Sliders. by Simon Goellner (@simeydotme) on CodePen.

リンク

CSS3 Javascript Range Slider

CSS3 Javascript Range Slider

以下の結果をご覧いただけます!

See the Pen #029 - Range Slider by Florin Pop (@FlorinPop17) on CodePen.

リンク

ダイナミックアイコン付きレンジスライダー

ダイナミックアイコン付きレンジスライダー

以下の結果をご覧いただけます!

See the Pen Range slider with dynamic icons by LeFourbeFromage (@lefourbefromage) on CodePen.

リンク

マルチレンジ入力CSS

マルチレンジ入力CSS

以下の結果をご覧いただけます!

See the Pen Multi Range input, CSS-only by Yair Even Or (@vsync) on CodePen.

リンク

結論:

この記事が、Webサイトプロジェクトに役立つスライダーの範囲をよりよく理解するのに役立つことを願っています。 ご不明な点がございましたら、メールにてお問い合わせください。 お早めにご連絡いたします。 より良い記事を書くことができるように、ページをサポートし続けてください。 良い一日!