Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="p-8 max-w-sm flex flex-col gap-6">
  <div class="midwest-range midwest-form-group " data-controller="midwest-range">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="score-12680">
        Score
      </label>
      <output class="midwest-range__value" data-midwest-range-target="output" for="score-12680">70</output>
    </div>
    <input type="range" name="score" id="score-12680" value="70" min="0" max="100" step="1" disabled="disabled" style="--pct: 70.0%" data-midwest-range-target="input" data-action="input->midwest-range#update" />
    <div class="midwest-form-group__bottom ">
      <span class="midwest-label description">
        Score is locked and cannot be changed
      </span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="p-8 max-w-sm flex flex-col gap-6">
  <%= midwest_form_range(
    name: :score,
    label: "Score",
    value: 70,
    disabled: true,
    show_value: true,
    description: "Score is locked and cannot be changed"
  ) %>
</div>

Disabled

A disabled range input prevents interaction.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Range/disabled

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."