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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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="volume-127b0">
        Volume
      </label>
      <output class="midwest-range__value" data-midwest-range-target="output" for="volume-127b0">60</output>
    </div>
    <input type="range" name="volume" id="volume-127b0" value="60" min="0" max="100" step="1" style="--pct: 60.0%" data-midwest-range-target="input" data-action="input->midwest-range#update" />
  </div>
  <div class="midwest-range midwest-form-group " data-controller="midwest-range">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="brightness-127b8">
        Brightness
      </label>
      <output class="midwest-range__value" data-midwest-range-target="output" for="brightness-127b8">3</output>
    </div>
    <input type="range" name="brightness" id="brightness-127b8" value="3" min="1" max="10" step="1" style="--pct: 22.22%" data-midwest-range-target="input" data-action="input->midwest-range#update" />
    <div class="midwest-form-group__bottom ">
      <span class="midwest-label description">
        Adjust screen brightness
      </span>
    </div>
  </div>
  <div class="midwest-range midwest-form-group " data-controller="midwest-range">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="price-127c0">
        Max price
      </label>
      <output class="midwest-range__value" data-midwest-range-target="output" for="price-127c0">250</output>
    </div>
    <input type="range" name="price" id="price-127c0" value="250" min="0" max="500" step="10" style="--pct: 50.0%" data-midwest-range-target="input" data-action="input->midwest-range#update" />
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="p-8 max-w-sm flex flex-col gap-6">
  <%= midwest_form_range(
    name: :volume,
    label: "Volume",
    value: 60,
    min: 0,
    max: 100,
    show_value: true
  ) %>
  <%= midwest_form_range(
    name: :brightness,
    label: "Brightness",
    value: 3,
    min: 1,
    max: 10,
    step: 1,
    show_value: true,
    description: "Adjust screen brightness"
  ) %>
  <%= midwest_form_range(
    name: :price,
    label: "Max price",
    value: 250,
    min: 0,
    max: 500,
    step: 10,
    show_value: true
  ) %>
</div>

With value display

Shows the current value alongside the label, updated live as the slider moves.

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/with_value_display

Annotate a preview to embed its Figma design here:

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