技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

[示例詳解]用HTML + CSS創(chuàng)建可拖動的范圍滑塊(Range Slider)

作者:admin    時間:2022-9-12 17:18:59    瀏覽:

在 HTML5 引入的許多新表單元素中,范圍滑塊(range slider)是最常用的一種。以前,你需要JavaScript 來創(chuàng)建一個簡單的滑塊。如今,你只用 HTML+CSS 就能創(chuàng)建它。在這篇文章中,我們將介紹如何使用 CSS 來自定義和設(shè)置 HTML 滑塊的樣式。

什么是 HTML 中的范圍滑塊?

范圍滑塊是一種輸入,你可以在其中從控件或滑動條中選擇一個值。我們可以將車把向右或向左滑動來產(chǎn)生一個范圍。在計算機(jī)上操作音量或亮度控件時,你通??梢哉业揭粋€滑塊。滑塊可以在欄的一端有一個圖標(biāo),也可以在欄的兩端有一個圖標(biāo),在 JavaScript 的幫助下選擇特定范圍。請參閱下面的區(qū)別:

范圍滑塊適用于以下情況:

  • 你知道范圍的上限和下限。
  • 你需要訪問范圍廣泛的數(shù)字。
  • 你希望用戶經(jīng)常調(diào)整他們的輸入(例如:音量控制)。

我們將從創(chuàng)建 HTML 和 CSS 文件開始。

HTML 滑塊輸入

首先,將以下代碼粘貼到你選擇的編碼環(huán)境中。用瀏覽器打開,結(jié)果顯示了一個可以從 0 調(diào)整到 200 的基本滑塊。

<div class="slider">
    <input type="range" min="0" max="200" value="100" oninput="rangeValue.innerText = this.value">
    <p id="rangeValue">100</p>
</div>

代碼解釋

1、<div class="slider"> - 類名slider,將所有 HTML 代碼包裝在這個 div 中,用于 CSS 樣式。我們將在 CSS 文件中調(diào)用這個類。

2、<input type="range"> - "range" 輸入類型允許你指定一個數(shù)值,該數(shù)值不得小于也不得大于給定值。在我們的例子中,我們將使用輸入來創(chuàng)建一個滑塊控件。默認(rèn)范圍是 0 到 100。你可以使用以下屬性設(shè)置接受數(shù)字的限制。

  • min - 范圍內(nèi)允許的最小值。默認(rèn)值為 0。
  • max  - 范圍內(nèi)允許的最大值。默認(rèn)值為 100。
  • step  - 范圍內(nèi)的合法間隔數(shù)。默認(rèn)值為 1。
  • value - 頁面加載后的默認(rèn)值或起始值。

在大多數(shù)情況下,默認(rèn)值介于最小值和最大值之間,但你可以選擇將其更改為你喜歡的任何值。在我們的示例中,加載頁面后,滑塊按鈕應(yīng)該已經(jīng)位于 100。

3、oninput="rangeValue.innerText = this.value" , <p id="rangeValue">10</p>,默認(rèn)情況下,范圍輸入不顯示其值的數(shù)值讀數(shù)。因此,我們將變量“ oninput ”分配給 rangeValue 以查看數(shù)字的范圍。<p id> 標(biāo)簽只是在屏幕上打印數(shù)值。

CSS 滑塊輸入

如你所見,可以僅使用 HTML 創(chuàng)建一個非常基本的滑塊。但是,我們可能希望添加更積極的視覺印象以增強(qiáng)用戶體驗。這可以通過將以下 CSS 代碼粘貼到你的編碼環(huán)境來完成。結(jié)果將顯示一個帶有邊框的彩色范圍滑塊。

body {
  background: linear-gradient(to right, red, yellow);
}

.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 500px;
  height: 60px;
  padding: 30px;
  padding-left: 40px;
  background: #fcfcfc;
  border-radius: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0px 15px 40px #7E6D5766;
}

.slider p {
  font-size: 26px;
  font-weight: 600;
  font-family: Open Sans;
  padding-left: 30px;
  color: black;
}

.slider input[type="range"] {
  -webkit-appearance: none !important;
  width: 420px;
  height: 2px;
  background: black;
  border: none;
  outline: none;
}

.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 30px;
  height: 30px;
  background: black;
  border: 2px solid black;
  border-radius: 50%;
  cursor: pointer;
}

.slider input[type="range"]::-webkit-slider-thumb:hover {
  background: black;
}

在 HTML 代碼中,我們創(chuàng)建了一個類名“slider”  ,并為類中的所有內(nèi)容添加了 CSS 樣式。根據(jù)自己的喜好調(diào)整 CSS 代碼。

結(jié)果

你現(xiàn)在已經(jīng)創(chuàng)建了一個范圍滑塊并了解了所涉及的輸入和屬性。你的結(jié)果應(yīng)如下所示:

 

demodownload

相關(guān)文章

標(biāo)簽: 滑塊  可拖動滑塊  range-slider  
x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */