---
title: Range Slider
layout: doc/layouts/default.html
---
# Range Slider
***
***
Basic
You can create a range slider bar using minimal markup.
HTML
{{#markdown}}
```html
```
{{/markdown}}
***
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}}
### 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}}
### 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}}
***
## 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";
```