파운데이션 슬라이더


기초 슬라이더를 사용하면 사용자가 드래그하여 범위 값을 선택할 수 있습니다.

<div class="range-slider" data-slider>를 사용하여 슬라이더를 만들 수 있습니다. <div> 내에서 두 개의 <span> 요소를 추가합니다. <span class="range-slider-handle"> 만들기 직사각형 슬라이더(파란색 배경), <span class="range-slider-active-segment">는 슬라이더 뒤의 회색 가로 막대로, 슬라이더의 드래그 영역입니다. . <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 类来禁用滑块：

实例

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

참고: 슬라이더에는 JavaScript가 필요합니다. 그래서 초기화를 해야 합니다 oundation JS:

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

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
🎜

둥근 ​​모서리 및 비활성화된 슬라이더🎜🎜 사용 .radius 및 .round 클래스는 둥근 슬라이더를 추가합니다. .disabled 클래스를 사용하여 슬라이더를 비활성화합니다. 🎜🎜🎜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»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

세로 슬라이더 🎜🎜세로 슬라이더를 생성하려면 .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>默认情况下，区间值在 "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>
🎜🎜 🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜🎜

슬라이더 값🎜🎜기본적으로 슬라이더는 가로 막대 중앙에 배치됩니다. (값은 "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 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»🎜🎜Click 온라인 예제를 보려면 "예제 실행" 버튼을 누르세요🎜🎜

슬라이더 값 표시

🎜슬라이더를 드래그할 때 실시간으로 값을 표시해야 하는 경우 <코드>< div> code>data-options="display_selector:#id" 속성과 요소 ID 값은 아래와 같이 슬라이더의 ID와 일치합니다. 🎜🎜🎜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>
🎜🎜🎜예제 실행 »🎜🎜온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요🎜🎜

결합된 데이터 옵션

🎜다음 예에서는 display_selector 및 초기 데이터 옵션:🎜 🎜🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행»🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

Step length

기본적으로 슬라이더가 슬라이드하는 양은 "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>

Instance

rrreee

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

사용자 지정 간격🎜🎜기본적으로 간격 값은 " 0"과 "100". 간격 값은 데이터 옵션 start 및 end를 추가하여 설정할 수 있습니다. 다음 인스턴스 설정 범위는 "1"부터 "20"까지입니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜온라인 인스턴스를 보려면 "Run Instance" 버튼을 클릭하세요.🎜🎜🎜Grid 사용🎜🎜다음 그리드의 슬라이더 사용: 🎜🎜🎜Instances🎜🎜rrreee🎜🎜🎜예제 실행»🎜🎜온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.🎜🎜🎜입력 사용🎜🎜다음 예제에서는 <코드를 사용합니다. ><input>는 <span>를 대체하여 슬라이더 값을 표시합니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜Run Instance»🎜🎜"Run Instance"를 클릭합니다. 온라인 인스턴스를 보려면 버튼🎜🎜