Skip to content

Commit 470b447

Browse files
mdomdo
authored
Custom range input (twbs#25600)
* added the styling * added the documentation * update for one rule per line * fix hound error: trailing whitespace * trimmed off vendor prefixes * Add note about track and thumb * Psuedo-elements must be split across multiple rulesets to have an affect * Fix firefox inner focus * Seems that FF is the only one affected by this * Add support for gradients * Add labels, clarify min/max changes * add step example * add custom range vars
1 parent 3dd0bde commit 470b447

File tree

3 files changed

+162
-0
lines changed

3 files changed

+162
-0
lines changed

‎docs/4.0/components/forms.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1172,6 +1172,29 @@ As is the `size` attribute:
11721172
</select>
11731173
{% endexample %}
11741174

1175+
### Range
1176+
1177+
Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
1178+
1179+
{% example html %}
1180+
<label for="customRange1">Example range</label>
1181+
<input type="range" class="custom-range" id="customRange1">
1182+
{% endexample %}
1183+
1184+
Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
1185+
1186+
{% example html %}
1187+
<label for="customRange2">Example range</label>
1188+
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
1189+
{% endexample %}
1190+
1191+
By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.
1192+
1193+
{% example html %}
1194+
<label for="customRange3">Example range</label>
1195+
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
1196+
{% endexample %}
1197+
11751198
### File browser
11761199

11771200
The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.

‎scss/_custom-forms.scss‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,3 +295,126 @@
295295
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
296296
}
297297
}
298+
299+
// Range
300+
//
301+
// Style range inputs the same across browsers. Vendor-specific rules for psuedo
302+
// elements cannot be mixed. As such, there are no shared styles for focus or
303+
// active states on prefixed selectors.
304+
305+
.custom-range {
306+
width: 100%;
307+
padding-left: 0; // Firefox specific
308+
background-color: transparent;
309+
appearance: none;
310+
311+
&:focus {
312+
outline: none;
313+
}
314+
315+
&::-moz-focus-outer {
316+
border: 0;
317+
}
318+
319+
&::-webkit-slider-thumb {
320+
width: $custom-range-thumb-width;
321+
height: $custom-range-thumb-height;
322+
margin-top: -($custom-range-thumb-width * .25); // Webkit specific?
323+
@include gradient-bg($custom-range-thumb-bg);
324+
border: $custom-range-thumb-border;
325+
@include border-radius($custom-range-thumb-border-radius);
326+
@include box-shadow($custom-range-thumb-box-shadow);
327+
appearance: none;
328+
329+
&:focus {
330+
outline: none;
331+
box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
332+
}
333+
334+
&:active {
335+
@include gradient-bg($custom-range-thumb-active-bg);
336+
}
337+
}
338+
339+
&::-webkit-slider-runnable-track {
340+
width: $custom-range-track-width;
341+
height: $custom-range-track-height;
342+
color: transparent; // Why?
343+
cursor: $custom-range-track-cursor;
344+
background-color: $custom-range-track-bg;
345+
border-color: transparent;
346+
@include border-radius($custom-range-track-border-radius);
347+
@include box-shadow($custom-range-track-box-shadow);
348+
}
349+
350+
&::-moz-range-thumb {
351+
width: $custom-range-thumb-width;
352+
height: $custom-range-thumb-height;
353+
@include gradient-bg($custom-range-thumb-bg);
354+
border: $custom-range-thumb-border;
355+
@include border-radius($custom-range-thumb-border-radius);
356+
@include box-shadow($custom-range-thumb-box-shadow);
357+
appearance: none;
358+
359+
&:focus {
360+
outline: none;
361+
box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
362+
}
363+
364+
&:active {
365+
@include gradient-bg($custom-range-thumb-active-bg);
366+
}
367+
}
368+
369+
&::-moz-range-track {
370+
width: $custom-range-track-width;
371+
height: $custom-range-track-height;
372+
color: transparent;
373+
cursor: $custom-range-track-cursor;
374+
background-color: $custom-range-track-bg;
375+
border-color: transparent; // Firefox specific?
376+
@include border-radius($custom-range-track-border-radius);
377+
@include box-shadow($custom-range-track-box-shadow);
378+
}
379+
380+
&::-ms-thumb {
381+
width: $custom-range-thumb-width;
382+
height: $custom-range-thumb-height;
383+
@include gradient-bg($custom-range-thumb-bg);
384+
border: $custom-range-thumb-border;
385+
@include border-radius($custom-range-thumb-border-radius);
386+
@include box-shadow($custom-range-thumb-box-shadow);
387+
appearance: none;
388+
389+
&:focus {
390+
outline: none;
391+
box-shadow: $custom-range-thumb-focus-box-shadow; // No mixin for focus accessibility
392+
}
393+
394+
&:active {
395+
@include gradient-bg($custom-range-thumb-active-bg);
396+
}
397+
}
398+
399+
&::-ms-track {
400+
width: $custom-range-track-width;
401+
height: $custom-range-track-height;
402+
color: transparent;
403+
cursor: $custom-range-track-cursor;
404+
background-color: transparent;
405+
border-color: transparent;
406+
border-width: ($custom-range-thumb-height * .5);
407+
@include box-shadow($custom-range-track-box-shadow);
408+
}
409+
410+
&::-ms-fill-lower {
411+
background-color: $custom-range-track-bg;
412+
@include border-radius($custom-range-track-border-radius);
413+
}
414+
415+
&::-ms-fill-upper {
416+
margin-right: 15px; // arbitrary?
417+
background-color: $custom-range-track-bg;
418+
@include border-radius($custom-range-track-border-radius);
419+
}
420+
}

‎scss/_variables.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -504,6 +504,22 @@ $custom-select-height-sm: $input-height-sm !default;
504504
$custom-select-font-size-lg: 125% !default;
505505
$custom-select-height-lg: $input-height-lg !default;
506506

507+
$custom-range-track-width: 100% !default;
508+
$custom-range-track-height: .5rem !default;
509+
$custom-range-track-cursor: pointer !default;
510+
$custom-range-track-bg: $gray-300 !default;
511+
$custom-range-track-border-radius: 1rem !default;
512+
$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
513+
514+
$custom-range-thumb-width: 1rem !default;
515+
$custom-range-thumb-height: $custom-range-thumb-width !default;
516+
$custom-range-thumb-bg: $component-active-bg !default;
517+
$custom-range-thumb-border: 0 !default;
518+
$custom-range-thumb-border-radius: 1rem !default;
519+
$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($black, .1) !default;
520+
$custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
521+
$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
522+
507523
$custom-file-height: $input-height !default;
508524
$custom-file-focus-border-color: $input-focus-border-color !default;
509525
$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;

0 commit comments

Comments
 (0)