ファンデーションスライダー


基礎スライダーを使用すると、ユーザーはドラッグして間隔の値を選択できます:

スライダーは、スライダーの後ろにある灰色の水平バーで、スライダーのドラッグ領域です。 <div class="range-slider" data-slider> 创建。在<div> 内, 添加两个 <span> 元素: <span class="range-slider-handle"> 创建矩形滑块（蓝色背景），<span class="range-slider-active-segment">

注: スライダーには JavaScript が必要です。したがって初期化する必要があります oundation JS:

インスタンス

<!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>

インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

角を丸め、スライダーを無効にします

.radiusを使用し、 .round クラスを使用して、丸いスライダーを追加します。 .disabled クラスを使用してスライダーを無効にします:

.radius 和 .round 类来添加圆角滑块。使用 .disabled 类来禁用滑块：

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

垂直滑块

使用 .vertical-range 类和 data-options="vertical: true;" 来创建垂直滑块:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

滑块值

默认情况下，滑块放在横条的中间 (数值为 "50")。可以通过添加 data-options="initial: num" 属性来修改默认值:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

显示滑块值

如果我们需要在滑块拖动时实时显示值，可以通过在 <div> 中添加 data-options="display_selector:#id" 属性且元素 id 值与滑块的 id  匹配，如下实例：

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

组合数据选项

以下实例使用了 display_selector 和 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>

インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

垂直スライダー🎜🎜.vertical-range クラスと data-options="vertical: true;" を使用して垂直スライダーを作成します: 🎜🎜🎜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インスタンス»🎜 🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜🎜🎜🎜スライダーの値🎜🎜デフォルトでは、スライダーは水平バーの中央に配置されます（値は「50」です）。デフォルト値は、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>默认情况下，区间值在 "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>
🎜🎜🎜Run Instance»🎜🎜Click 「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します🎜🎜

スライダー値を表示

🎜 スライダーがドラッグされたときにリアルタイムで値を表示する必要がある場合は、< に < を追加できます。 div> code>data-options="display_selector:#id" 属性と要素 ID 値は、以下に示すようにスライダーの ID と一致します。 🎜🎜
<!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>
🎜🎜🎜サンプルの実行 »🎜🎜オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください🎜🎜

結合データオプション

🎜次の例では、display_selector とinitial データ オプション:🎜 🎜🎜インスタンス🎜🎜
<!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>
🎜🎜🎜インスタンスの実行»🎜🎜 [インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します🎜🎜

ステップの長さ

デフォルトでは、スライダーのスライド量は「1」です。ステップ値は、data-options="step:num;" 属性を追加することで変更できます。インスタンスで 25 に設定します:data-options="step: num;" 属性来修改步长值。实例中设置为 25:

实例

rrreee

运行实例 »

点击 "运行实例" 按钮查看在线实例

自定义区间

默认情况下，区间值在 "0" 到 "100"。可以通过添加 data-options start 和 end 来设置区间值。以下实例设置区间值为 "1" 到 "20":

实例

rrreee

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用网格

以下使用为在网格中使用滑块：

实例

rrreee

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用 Input

以下实例使用 <input> 取代 <span>

インスタンス

rrreee

インスタンスを実行»オンラインインスタンスを表示するには、[インスタンスを実行]ボタンをクリックしてください

カスタム間隔🎜🎜デフォルトでは、間隔値は「」の間です。 0」と「100」。間隔値は、データ オプション start と end を追加することで設定できます。次のインスタンス設定の範囲は「1」から「20」です: 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行»🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜🎜グリッドの使用🎜🎜以下使用法はグリッド内のスライダーを使用します: 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜例の実行»🎜🎜オンライン例を表示するには、[例の実行]ボタンをクリックしてください🎜🎜🎜入力を使用します🎜🎜次の例では、<input> は <span> を置き換えてスライダーの値を表示します: 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜 [Run Instance] をクリックします。オンラインインスタンスを表示するボタン🎜🎜