x
1
2
3
4
5
6
7
8
9
10
11
12
<div class="flex items-center justify-center p-16"> <div class="w-full max-w-sm"> <div class="midwest-range midwest-form-group " data-controller="midwest-range"> <div class="midwest-form-group__top"> <label class="midwest-label " for="range-e918"> Volume </label> </div> <input type="range" name="range" id="range-e918" value="40" min="0" max="100" step="1" style="--pct: 40.0%" data-midwest-range-target="input" data-action="input->midwest-range#update" /> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="flex items-center justify-center p-16"> <div class="w-full max-w-sm"> <%= midwest_form_range( name: :range, label: params[:label].presence || 'Volume', value: params[:value].presence&.to_i || 40, min: params[:min].presence&.to_i || 0, max: params[:max].presence&.to_i || 100, step: params[:step].presence&.to_i || 1, show_value: params[:show_value] == true, disabled: params[:disabled] == true, optional: params[:optional] == true, description: params[:description].presence, error: params[:error].presence ) %> </div></div>Playground
All options editable live in the Lookbook UI.
| Param | Description | Input |
|---|---|---|
|
Label shown above the slider |
|
|
|
Initial numeric value |
|
|
|
Minimum allowed value |
|
|
|
Maximum allowed value |
|
|
|
Increment between values |
|
|
|
Display the current value next to the label |
|
|
|
Prevent interaction |
|
|
|
Append an Optional badge to the label |
|
|
|
Helper text shown below the slider |
|
|
|
Validation error message |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Range/playground
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."