zurb-foundation-5/doc/includes/range_sliders/examples_slider_variables.html

Foundation 5 for npm (no code modification from original repo)

{{#markdown}}
```scss
$include-html-range-slider-classes: $include-html-classes;

// These variabels define the slider bar styles
$range-slider-bar-width: 100%;
$range-slider-bar-height: rem-calc(16);

$range-slider-bar-border-width: 1px;
$range-slider-bar-border-style: solid;
$range-slider-bar-border-color: $gainsboro;
$range-slider-radius: $global-radius;
$range-slider-round: $global-rounded;
$range-slider-bar-bg-color: $ghost;
$range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);

// Vertical bar styles
$range-slider-vertical-bar-width: rem-calc(16);
$range-slider-vertical-bar-height: rem-calc(200);

// These variabels define the slider handle styles
$range-slider-handle-width: rem-calc(32);
$range-slider-handle-height: rem-calc(22);
$range-slider-handle-position-top: rem-calc(-5);
$range-slider-handle-bg-color: $primary-color;
$range-slider-handle-border-width: 1px;
$range-slider-handle-border-style: solid;
$range-slider-handle-border-color: none;
$range-slider-handle-radius: $global-radius;
$range-slider-handle-round: $global-rounded;
$range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
$range-slider-handle-cursor: pointer;

$range-slider-disabled-opacity: 0.7;
```
{{/markdown}}