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
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. 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 ¶
Principles, Technologies, and Methods of Geographic Information Systems
102