Range Slider
This handy slider will allow you to drag a handle to select a specific value from a range.
Basic
You can create a range slider bar using minimal markup.
HTML
<div class="range-slider" data-range data-options="range: 0, 100;"></div>
Rendered HTML
Advanced
Additional classes can be added to your range slider to change its appearance.
Add Border Radius
You can add a border radius to the range slider by adding the radius
class to the range-slider
element.
HTML
<div class="range-slider radius" data-range data-options="range: 0, 100;"></div>
Rendered HTML
Vertical Range Slider
You can create a vertical range slider instead of the default horizontal slider by adding the vertical-range
class to the range-slider
element.
HTML
<div class="range-slider vertical-range" data-range data-options="range: 0, 100;"></div>
Rendered HTML
Fixed Steps
You can create a range slider with fixed steps by defining those steps in your data-range data-options
attribute.
HTML
<div class="range-slider" data-range data-options="fixed_steps: 10,20,30,40,50;"></div>
Rendered HTML
Customize With Sass
Progress bars can be easily customized using our provided Sass variables.
SCSS
$include-html-media-classes: $include-html-classes;
// We use this to se the prog bar height
$progress-bar-height: rem-calc(25);
$progress-bar-color: transparent;
// We use these to control the border styles
$progress-bar-border-color: scale-color(#fff, $lightness: 20%);
$progress-bar-border-size: 1px;
$progress-bar-border-style: solid;
$progress-bar-border-radius: $global-radius;
// We use these to control the margin & padding
$progress-bar-pad: rem-calc(2);
$progress-bar-margin-bottom: rem-calc(10);
// We use these to set the meter colors
$progress-meter-color: $primary-color;
$progress-meter-secondary-color: $secondary-color;
$progress-meter-success-color: $success-color;
$progress-meter-alert-color: $alert-color;
Semantic Markup With Sass
You can create your own progress bars using our Sass mixins.
Basic
You can use the progress-container()
and progress-meter()
mixin to create your own progress bars, like so:
Container Mixin
SCSS
.custom-progress-container {
@include progress-container();
}
HTML
<div class="custom-progress-container"></div>
Meter Mixin
SCSS
.custom-progress-container { @include progress-container;
& > span { @include progress-meter($bg); }
}
Advanced
You can further customize your progress bars using the provided options in the progress-bar()
mixin:
Adding Border Radius
We can add a border radius to our progress bar through our mixins:
SCSS
.custom-progress-container {
@include progress-container;
@include radius(6px);
& > span {
@include progress-meter(pink);
@include radius(5px);
}
}
Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
@import "foundation/components/progress-bars";