最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。
The Foundation slider allows you to drag to select an interval value:
The slider can be used by using the 注意: The slider needs to use JavaScript. So you need to initialize Foundation JS: 尝试一下 » Use Use By default, the slider is placed in the middle of the bar (the value is “50”). Can be done by adding If we need to display values in real time as the slider is dragged, we can use the The following example uses the 默认情况下，滑块滑动的增加减少的数量为 “1”。可以通过添加 By default, the range values are “0” to “100”. You can add data-options The following is used to use the slider in the mesh: The following examples use the class="range-slider" data-slider> Create. In Inside, add two Elements: class="range-slider-handle"> Create a rectangular slider (blue background) class="range-slider-active-segment"> It is the gray bar behind the slider, which is the area where the slider is dragged. 8.26.1. Example ¶
Fillet and disable slider ¶
.radius And .round Class to add fillet sliders. Use .disabled Class to disable the slider: 8.26.2. Example ¶
<div class="range-slider" data-slider>..div> <div class="range-slider radius" data-slider>...div> <div class="range-slider round" data-slider>...div> <div class="range-slider disabled" data-slider>...div>
Vertical slider ¶
.vertical-range Class and data-options="vertical: true;" To create a vertical slider: 8.26.3. Example ¶
<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>
Slider value ¶
data-options="initial: num" Property to modify the default value: 8.26.4. Example ¶
<div class="range-slider" data-slider data-options="initial: 80;"> <span class="range-slider-handle">span> <span class="range-slider-active-segment">span> div>
Show slider valu ¶
Add in data-options="display_selector:#id" Attribute and the element id value matches the id of the slider, as shown in the following example: 8.26.5. Example ¶
Combined data option ¶
display_selector And initial Data options: 8.26.6. Example ¶
<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>
步长 ¶
data-options="step: num;" 属性来修改步长值。实例中设置为 25: 8.26.7. Example ¶
<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>
Custom interval ¶
start And end To set the interval value. The following example sets the range value from “1” to “20”: 8.26.8. Example ¶
<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>
Working with Grid ¶
8.26.9. Example ¶
Use Input ¶
Replace To display the value of the slider: 8.26.10. Example ¶