Range
Renders a range slider input and returns the selected value as a string.
Renders a range slider input and returns the selected value as a string. Use for numeric values where a visual slider is more intuitive, such as spacing, opacity or font sizes.
Returns: A string.
Properties
| Property | Description | Required |
|---|---|---|
min | The minimum value of the range. | Yes |
max | The maximum value of the range. | Yes |
step | The increment between values. | No |
unit | A unit label appended to the input field (e.g. px, %). | No |
Example
---
attributes:
spacing:
type: range
label: Section spacing
min: 0
max: 100
step: 10
unit: px
default: 50
---<section style="padding: {{ spacing }}px 0;">
<!-- block content -->
</section>Usage
---
attributes:
opacity:
type: range
label: Overlay opacity
min: 0
max: 100
step: 5
unit: "%"
default: 50
hint: Controls how transparent the overlay appears
---<div class="overlay" style="opacity: {{ opacity | divided_by: 100.0 }};"></div>