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
<article data-controller="midwest-card" class="midwest-card">
  <div class="wrap">
    <section>    
      <div class="midwest-grid" style="--grid-width: 200px; --grid-gap: 1rem">
        <div class="midwest-range midwest-form-group " data-controller="midwest-range">
          <div class="midwest-form-group__top">
            <label class="midwest-label " for="score-e590">
            </label>
          </div>
          <input type="range" name="score" id="score-e590" style="--pct: 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="score-e598">
            </label>
          </div>
          <input type="range" name="score" id="score-e598" style="--pct: 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="score-e5a0">
            </label>
          </div>
          <input type="range" name="score" id="score-e5a0" style="--pct: 0%" data-midwest-range-target="input" data-action="input->midwest-range#update" />
        </div>
      </div>
    </section>
  </div>
</article>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%= midwest_card do |card| %>
  <% card.with_section do %>
    <%= midwest_grid(gap: 1) do %>
      <% 3.times do %>
        <%= midwest_form_range(
          name: params[:name] || :score,
          label: params[:label],
          description: params[:description],
          value: params[:value]&.to_i,
          min: params[:min]&.to_i,
          max: params[:max]&.to_i,
          step: params[:step]&.to_i,
          disabled: params[:disabled],
          optional: params[:optional],
          show_value: params[:show_value],
          error: params[:error]
        ) %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Default

The minimum code needed to render a range input.

Param Description Input

—

—

—

—

—

—

—

—

—

—

—

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

Accessibility

Figma embed for Range/default

Annotate a preview to embed its Figma design here:

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