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";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition ยป