Gelangsar asas


Peluncur asas membenarkan pengguna menyeret untuk memilih nilai julat:

Peluncur boleh dibuat menggunakan <div class="range-slider" data-slider>. Dalam <div>, tambah dua <span> elemen: <span class="range-slider-handle"> mencipta peluncur segi empat tepat (latar belakang biru) dan <span class="range-slider-active-segment"> ialah bar mendatar kelabu di belakang peluncur, yang merupakan kawasan seret peluncur.

Nota: Peluncur memerlukan JavaScript. Jadi anda perlu memulakan oundation JS:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
<div style="padding:20px;">
  <h2>区间滑块</h2>
  <p> .range-slider-handle 类创建一个滑块实体（蓝色矩形），.range-slider-active-segment 在滑块后添加灰色横条：</p>
  <div class="range-slider" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Peluncur bulat dan dilumpuhkan

Gunakan kelas .radius dan .round untuk menambah peluncur bulat. Gunakan kelas .disabled untuk melumpuhkan peluncur:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>圆角 & 禁用滑块</h2>
<p>使用 <code>.radius</code> 和 <code>.round</code> 类来添加圆角滑块。使用 <code>.disabled</code> 类来禁用滑块：</p>

  <span>默认:</span>
  <div class="range-slider" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
  
  <span>圆角:</span>
  <div class="range-slider radius" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
  
  <span>圆形:</span>
  <div class="range-slider round" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
  
  <span>禁用:</span>
  <div class="range-slider disabled" data-slider>
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»

Klik "Run Instance " Butang untuk melihat contoh dalam talian

Peluncur Menegak

Gunakan kelas .vertical-range dan data-options="vertical: true;" untuk mencipta peluncur menegak:

Instance 

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>垂直滑块</h2>
  <p>使用 <code>.vertical-range</code> 类和 <code>data-options="vertical: true;"</code> 来创建垂直滑块:</p>
  <div class="range-slider vertical-range" data-slider data-options="vertical: true;">
    <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Nilai Blok Slaid

Secara lalai, peluncur diletakkan di tengah-tengah bar (nilai ialah "50"). Nilai lalai boleh diubah suai dengan menambah atribut data-options="initial: num":

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>默认滑块值</h2>
  <p>默认情况下，滑块放在横条的中间 (数值为 "50")。可以通过添加 <code>data-options="initial: <em>num</em>"</code> 属性来修改默认值:</p>
  <div class="range-slider" data-slider data-options="initial: 80;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run instance»

Klik Butang "Run" Instance" untuk melihat contoh dalam talian

Tunjukkan nilai peluncur

Jika kita perlu memaparkan nilai dalam masa nyata apabila peluncur diseret, kita boleh menambah <div> atribut dalam data-options="display_selector:#id" Dan nilai id elemen sepadan dengan id peluncur, seperti yang ditunjukkan di bawah:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>显示滑块值</h2>
 <p>如果我们需要在滑块拖动时实时显示值，可以通过在 <code> <div></code> 中添加 <code>data-options="display_selector:#<em>id</em>"</code> 属性且元素 id 值与滑块的 id 匹配，如下实例：</p>
  <span id="mySlider"></span>
  <div class="range-slider" data-slider data-options="display_selector: #mySlider;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Jalankan instance »

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Pilihan data gabungan

Contoh berikut menggunakan pilihan data display_selector dan initial :

Instance 

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>组合数据选项</h2>
  <p>以下实例使用了 <code>display_selector</code> 和 <code>initial</code> 数据选项:</p>
  <span id="mySlider"></span>
  <div class="range-slider" data-slider data-options="display_selector: #mySlider; initial:20;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Saiz Langkah

Secara lalai, jumlah gelongsor gelangsar bertambah atau berkurang ialah "1". Nilai langkah boleh diubah suai dengan menambahkan atribut data-options="step: num;". Tetapkan kepada 25 dalam contoh:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>步长</h2>
  <p>默认情况下，滑块滑动的增加减少的数量为 "1"。可以通过添加 <code>data-options="step: <em>num</em>;"</code> 属性来修改长值。实例中设置为 25:</p>

  <span id="mySlider"></span>
  <div class="range-slider" data-slider data-options="display_selector: #mySlider; step: 25;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk lihat tika dalam talian

Selang tersuai

Secara lalai, nilai selang adalah dari "0" hingga "100". Nilai selang boleh ditetapkan dengan menambahkan pilihan data start dan end. Contoh berikut menetapkan nilai selang daripada "1" kepada "20":

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div style="padding:20px;">
  <h2>自定义区间</h2>
  <p>默认情况下，区间值在 "0" 到 "100"。可以通过添加 data-options <code>start</code> 和 <code>end</code> 来设置区间值。以下实例设置区间值为 "1" 到 "20":</p>

  <span id="mySlider"></span>
  <div class="range-slider" data-slider data-options="display_selector: #mySlider; start: 1; end: 20;">
    <span class="range-slider-handle"></span>
    <span class="range-slider-active-segment"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Jalankan instance»

Klik butang "Jalankan Instance" untuk melihat kejadian dalam talian

Menggunakan Grid

Yang berikut digunakan untuk menggunakan peluncur dalam grid:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>使用网格</h2>
  <p>以下使用为在网格中使用滑块：</p>
  <div class="small-10 columns">
    <div class="range-slider" data-slider data-options="display_selector: #mySlider;">
      <span class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
    </div>
  </div>
  <div class="small-2 columns">
    <span id="mySlider" style="display:block;margin-top:14px;"></span>
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Guna Input

contoh berikut Gunakan <input> bukannya <span> untuk memaparkan nilai peluncur:

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>

<div class="row">
  <h2>使用 Input</h2>
  <p>以下实例使用 <code><input></code> 取代 <code><span></code> 来显示滑块的值:</p>
  <div class="small-10 columns">
    <div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 72;">
      <span class="range-slider-handle"></span>
      <span class="range-slider-active-segment"></span>
    </div>
  </div>
  <div class="small-2 columns">
    <input type="number" id="mySlider" style="margin-top:7px;" value="72">
  </div>
</div>

<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian