Foundation CSS Slider

The Slider component in Foundation CSS provides an intuitive way to select a value within a specified range. Sliders are commonly used for tasks such as setting preferences, adjusting settings, or controlling parameters in a user interface. Here's how you can use the Slider component:

1. Basic Slider

To create a basic Slider, use the <input> element with the type attribute set to range.

Example markup:

<input type="range">

This will generate a default Slider with a range of values from the minimum to the maximum.

2. Customizing Slider Range

You can customize the range of the Slider by specifying the min and max attributes to define the minimum and maximum values, respectively.

Example markup:

<input type="range" min="0" max="100">

This will create a Slider with a range of values from 0 to 100.

3. Adding Step Increment

You can specify the increment step for the Slider by using the step attribute. This determines the amount by which the Slider value changes when the user interacts with it.

Example markup:

<input type="range" min="0" max="100" step="5">

This will create a Slider with a step increment of 5, meaning the value will change by 5 units each time the Slider is adjusted.

4. Displaying Slider Value

To display the current value of the Slider, you can use JavaScript to update a text element dynamically as the Slider is adjusted.

Example markup:

<input type="range" min="0" max="100" onchange="updateValue(this.value)">
<p id="sliderValue">0</p>

<script>
function updateValue(value) {
    document.getElementById('sliderValue').innerText = value;
}
</script>

This will create a Slider that updates the value displayed in a paragraph (<p>) element with the ID sliderValue as it is adjusted by the user.

Conclusion

The Slider component in Foundation CSS offers a versatile way to incorporate interactive range selection into your web applications. Whether you need a basic Slider or one with customized range, step, or value display, Foundation CSS provides the tools to create a Slider that fits your specific requirements.

Archive