A-One Design System

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>RANGE:</strong> Styled native input[type=range] slider<br>
      <strong>CLASSES:</strong> .range | .range-labels | .range-value
    </p>
    <p class="tw:mb-0 tw:text-sm">
      The native <code><input type="range"></code> supplies every bit of keyboard and
      screen-reader behaviour for free — arrow keys, Home/End, and
      <code>role="slider"</code> with <code>aria-valuenow/min/max</code> all come from the
      browser. <code>range_controller.js</code> only mirrors the value into the
      <code>.range-value</code> pill and a <code>--range-progress</code> custom property that
      paints the filled portion of the track — it adds no ARIA of its own.
    </p>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Distance radius</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Search radius filter</strong> — the filter-rail's most-requested missing
        control. Drag the thumb or focus it and use the arrow keys; the pill label and the
        filled track update live on every <code>input</code> event.
      </p>
    </div>
    <div class="tw:max-w-sm" data-controller="range" data-range-template-value="Within %s miles">
      <label for="range-distance" class="form-label">Search radius</label>
      <input type="range" id="range-distance" class="range" min="0" max="10" step="1" value="3"
             aria-describedby="range-distance-labels"
             data-range-target="input"
             data-action="input->range#update change->range#commit">
      <div class="range-labels" id="range-distance-labels">
        <span>0 miles</span>
        <span class="range-value" data-range-target="value">Within 3 miles</span>
        <span>10 miles</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><input type="range" class="range" min="0" max="10" step="1" value="3" data-range-target="input" data-action="input->range#update change->range#commit"></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Stepped (budget filter)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Stepped values:</strong> <code>step="25"</code> snaps to £25 increments —
        arrow keys move a whole step at a time.
      </p>
    </div>
    <div class="tw:max-w-sm" data-controller="range" data-range-template-value="Up to £%s">
      <label for="range-budget" class="form-label">Maximum course fee</label>
      <input type="range" id="range-budget" class="range" min="0" max="500" step="25" value="150"
             aria-describedby="range-budget-labels"
             data-range-target="input"
             data-action="input->range#update change->range#commit">
      <div class="range-labels" id="range-budget-labels">
        <span>£0</span>
        <span class="range-value" data-range-target="value">Up to £150</span>
        <span>£500</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><input type="range" class="range" min="0" max="500" step="25" value="150"></code>
    </div>
  </div>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Disabled</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Disabled:</strong> the real <code>[disabled]</code> attribute dims the track
        and thumb and blocks interaction — tokens only, no opacity magic numbers.
      </p>
    </div>
    <div class="tw:max-w-sm" data-controller="range" data-range-template-value="Within %s miles">
      <label for="range-disabled" class="form-label">Search radius</label>
      <input type="range" id="range-disabled" class="range" min="0" max="10" step="1" value="5" disabled
             aria-describedby="range-disabled-labels"
             data-range-target="input"
             data-action="input->range#update change->range#commit">
      <div class="range-labels" id="range-disabled-labels">
        <span>0 miles</span>
        <span class="range-value" data-range-target="value">Within 5 miles</span>
        <span>10 miles</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><input type="range" class="range" min="0" max="10" value="5" disabled></code>
    </div>
  </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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <%# Introductory callout %>
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>RANGE:</strong> Styled native input[type=range] slider<br>
      <strong>CLASSES:</strong> .range | .range-labels | .range-value
    </p>
    <p class="tw:mb-0 tw:text-sm">
      The native <code><input type="range"></code> supplies every bit of keyboard and
      screen-reader behaviour for free — arrow keys, Home/End, and
      <code>role="slider"</code> with <code>aria-valuenow/min/max</code> all come from the
      browser. <code>range_controller.js</code> only mirrors the value into the
      <code>.range-value</code> pill and a <code>--range-progress</code> custom property that
      paints the filled portion of the track — it adds no ARIA of its own.
    </p>
  </div>
  <%# Distance radius %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Distance radius</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Search radius filter</strong> — the filter-rail's most-requested missing
        control. Drag the thumb or focus it and use the arrow keys; the pill label and the
        filled track update live on every <code>input</code> event.
      </p>
    </div>
    <div class="tw:max-w-sm" data-controller="range" data-range-template-value="Within %s miles">
      <label for="range-distance" class="form-label">Search radius</label>
      <input type="range" id="range-distance" class="range" min="0" max="10" step="1" value="3"
             aria-describedby="range-distance-labels"
             data-range-target="input"
             data-action="input->range#update change->range#commit">
      <div class="range-labels" id="range-distance-labels">
        <span>0 miles</span>
        <span class="range-value" data-range-target="value">Within 3 miles</span>
        <span>10 miles</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><input type="range" class="range" min="0" max="10" step="1" value="3" data-range-target="input" data-action="input->range#update change->range#commit"></code>
    </div>
  </div>
  <%# Stepped %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Stepped (budget filter)</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Stepped values:</strong> <code>step="25"</code> snaps to £25 increments —
        arrow keys move a whole step at a time.
      </p>
    </div>
    <div class="tw:max-w-sm" data-controller="range" data-range-template-value="Up to £%s">
      <label for="range-budget" class="form-label">Maximum course fee</label>
      <input type="range" id="range-budget" class="range" min="0" max="500" step="25" value="150"
             aria-describedby="range-budget-labels"
             data-range-target="input"
             data-action="input->range#update change->range#commit">
      <div class="range-labels" id="range-budget-labels">
        <span>£0</span>
        <span class="range-value" data-range-target="value">Up to £150</span>
        <span>£500</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><input type="range" class="range" min="0" max="500" step="25" value="150"></code>
    </div>
  </div>
  <%# Disabled %>
  <div class="tw:border-t tw:pt-6">
    <h2 class="h4 tw:mb-4">Disabled</h2>
    <div class="callout tw:mb-4">
      <p class="tw:mb-0 tw:text-sm">
        <strong>Disabled:</strong> the real <code>[disabled]</code> attribute dims the track
        and thumb and blocks interaction — tokens only, no opacity magic numbers.
      </p>
    </div>
    <div class="tw:max-w-sm" data-controller="range" data-range-template-value="Within %s miles">
      <label for="range-disabled" class="form-label">Search radius</label>
      <input type="range" id="range-disabled" class="range" min="0" max="10" step="1" value="5" disabled
             aria-describedby="range-disabled-labels"
             data-range-target="input"
             data-action="input->range#update change->range#commit">
      <div class="range-labels" id="range-disabled-labels">
        <span>0 miles</span>
        <span class="range-value" data-range-target="value">Within 5 miles</span>
        <span>10 miles</span>
      </div>
    </div>
    <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
      <code><input type="range" class="range" min="0" max="10" value="5" disabled></code>
    </div>
  </div>
</div>

No notes provided.

No params configured.