--- title: Range Slider layout: doc/layouts/default.html --- # 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

{{#markdown}} ```html
``` {{/markdown}}

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

{{#markdown}} ```html
``` {{/markdown}}

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

{{#markdown}} ```html
``` {{/markdown}}

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

{{#markdown}} ```html
``` {{/markdown}}

Rendered HTML

*** ## Customize With Sass Progress bars can be easily customized using our provided Sass variables.

SCSS

{{> examples_progress_variables}} *** ## 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

{{#markdown}} ```scss .custom-progress-container { @include progress-container(); } ``` {{/markdown}}

HTML

{{#markdown}} ```html
``` {{/markdown}} ##### Meter Mixin

SCSS

{{#markdown}} ```scss .custom-progress-container { @include progress-container; & > span { @include progress-meter($bg); } } ``` {{/markdown}}

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

{{#markdown}} ```scss .custom-progress-container { @include progress-container; @include radius(6px); & > span { @include progress-meter(pink); @include radius(5px); } } ``` {{/markdown}} *** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

```scss @import "foundation/components/progress-bars"; ```