CodePen Embed - Range Slider Theming v2 + Tools Slider -> in Progress

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div class="box-container theme-dark">
        <h2>Header</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam illo tempore magni cupiditate molestiae laborum fuga.</p>
        <hr />
         <div class="form-group">
           <div class="range-slider-wrap js-range-slider-wrap">
            <label for="yourID" class="control-label range-slider-label">Label Name</label>
            <input type="range"
              id="yourID"
              class="range-slider js-range-slider"
              min="0"
              max="100"
              value="50"
              step="1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="50">

            <output for="yourID"
              class="range-slider-output js-range-slider-output"
              id="">50</output>
            <div class="help-block range-slider-help-block" aria-hidden="true">
              <strong>Error:</strong> Error message here
            </div>
          </div>
        </div> 
         <div class="form-group">
           <div class="range-slider-wrap js-range-slider-wrap">
            <label for="yourID" class="control-label range-slider-label">Label Name</label>
            <input type="range"
              id="yourID"
              class="range-slider js-range-slider"
              min="0"
              max="100"
              value="50"
              step="1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="50">

            <output for="yourID"
              class="range-slider-output js-range-slider-output"
              id="">50</output>
            <div class="help-block range-slider-help-block" aria-hidden="true">
              <strong>Error:</strong> Error message here
            </div>
          </div>
        </div> 
       </div>
    </div>

    <div class="col-xs-12 col-md-4">
      <div class="box-container theme-default">
        <h2>Header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam illo tempore magni cupiditate molestiae laborum fuga.</p>
        <hr />
        <div class="form-group">
          <div class="range-slider-wrap js-range-slider-wrap">
            <label for="yourID" class="control-label range-slider-label">Label Name</label>
            <input type="range"
              id="yourID"
              class="range-slider js-range-slider"
              min="0"
              max="100"
              value="50"
              step="1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="50">

            <output for="yourID"
              class="range-slider-output js-range-slider-output"
              id="">50</output>
            <div class="help-block range-slider-help-block" aria-hidden="true">
              <strong>Error:</strong> Error message here
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="range-slider-wrap js-range-slider-wrap">
            <label for="yourID" class="control-label range-slider-label">Label Name</label>
            <input type="range"
              id="yourID"
              class="range-slider js-range-slider"
              min="0"
              max="100"
              value="50"
              step="1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="50">

            <output for="yourID"
              class="range-slider-output js-range-slider-output"
              id="">50</output>
            <div class="help-block range-slider-help-block" aria-hidden="true">
              <strong>Error:</strong> Error message here
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-md-4">
      <div class="box-container theme-light">
        <h2>Header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam illo tempore magni cupiditate molestiae laborum fuga.</p>
        <hr />
        <div class="form-group">
          <div class="range-slider-wrap js-range-slider-wrap">
            <label for="yourID" class="control-label range-slider-label">Label Name</label>
            <input type="range"
              id="yourID"
              class="range-slider js-range-slider"
              min="0"
              max="100"
              value="50"
              step="1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="50">

            <output for="yourID"
              class="range-slider-output js-range-slider-output"
              id="">50</output>
            <div class="help-block range-slider-help-block" aria-hidden="true">
              <strong>Error:</strong> Error message here
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="range-slider-wrap js-range-slider-wrap">
            <label for="yourID" class="control-label range-slider-label">Label Name</label>
            <input type="range"
              id="yourID"
              class="range-slider js-range-slider"
              min="0"
              max="100"
              value="50"
              step="1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="50">

            <output for="yourID"
              class="range-slider-output js-range-slider-output"
              id="">50</output>
            <div class="help-block range-slider-help-block" aria-hidden="true">
              <strong>Error:</strong> Error message here
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xs-12">
      <div class="box-container theme-dark">
        <h2>Header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam illo tempore magni cupiditate molestiae laborum fuga.</p>
        <hr />
        <div class="form-group">
          <div class="range-slider-wrap range-slider-large js-range-slider-wrap">
            <label for="yourID" class="control-label range-slider-label">Label Name</label>
            <input type="range"
              id="yourID"
              class="range-slider js-range-slider"
              min="0"
              max="100"
              value="50"
              step="1"
              bubble="true"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="50">

            <output for="yourID"
              class="range-slider-output js-range-slider-output"
              id="">50</output>
            <div class="help-block range-slider-help-block" aria-hidden="true">
              <strong>Error:</strong> Error message here
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xs-12">
      <div class="box-container theme-default">
        <h2>Header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam illo tempore magni cupiditate molestiae laborum fuga.</p>
        <hr />
        <div class="form-group">
          <div class="range-slider-wrap range-slider-large js-range-slider-wrap">
            <label for="yourID" class="control-label range-slider-label">Label Name</label>
            <input type="range"
              id="yourID"
              class="range-slider js-range-slider"
              min="0"
              max="100"
              value="50"
              step="1"
              bubble="true"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="50">

            <output for="yourID"
              class="range-slider-output js-range-slider-output"
              id="">50</output>
            <div class="help-block range-slider-help-block" aria-hidden="true">
              <strong>Error:</strong> Error message here
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xs-12">
      <div class="box-container theme-light">
        <h2>Header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam illo tempore magni cupiditate molestiae laborum fuga.</p>
        <hr />
        <div class="form-group">
          <div class="range-slider-wrap range-slider-large js-range-slider-wrap">
            <label for="yourID" class="control-label range-slider-label">Label Name</label>
            <input type="range"
              id="yourID"
              class="range-slider js-range-slider"
              min="0"
              max="100"
              value="50"
              step="1"
              bubble="true"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="50">

            <output for="yourID"
              class="range-slider-output js-range-slider-output"
              id="">50</output>
            <div class="help-block range-slider-help-block" aria-hidden="true">
              <strong>Error:</strong> Error message here
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


$white: #fff;
$off-black: rgba(0, 0, 0, 0.15);

// Change $theme-* color value to update the theme
$theme-dark: $pru-navy;
$theme-default: $pru-blue;
$theme-light: $gray-lightest;

$theme-dark-color: $gray-lighter;
$theme-default-color: $pru-sky-blue;
$theme-light-color: $text-color;



@function set-theme-color($color) {
  @if (lightness($color) > 40) {
    @return $theme-light-color;
  } 
  @else if (lightness($color) > 30) {
    @return $theme-default-color;
  }
  @else {
    @return $theme-dark-color;
  }
}


@mixin input-range-border($track-border-color) {
  border-color: $track-border-color;
}
@mixin runnable-track($track-color) {
  background: $track-color;
  border-color: darken($track-color, 10%);
}
@mixin runnable-track-focus($track-color) {
  background: darken($track-color, 2.5%);
}
@mixin runnable-track-filled($track-color-filled, $track-color) {
  background: $track-color-filled;
  border-color: darken($track-color, 10%);
}
@mixin runnable-track-filled-focus($track-color-filled) {
  background: $track-color-filled;
}
@mixin slider-thumb($thumb-color-border, $thumb-color-bg) {
  border-color: $thumb-color-border;
  background: linear-gradient(135deg, $thumb-color-bg, darken($thumb-color-bg, 6%));
}
@mixin slider-thumb-hover($thumb-box-shadow-hover) {
  box-shadow: 0 0 0 4px $thumb-box-shadow-hover;
}
@mixin slider-thumb-focus($thumb-box-shadow-hover, $thumb-color-border) {
  box-shadow: 0 0 0 2px $thumb-box-shadow-hover, 0 0 0 4px $thumb-box-shadow-hover;
  border-color: $thumb-color-border;
}
@mixin slider-tooltip($tooltip-color-bg, $tooltip-color-text) {
  background: $tooltip-color-bg;
  color: $tooltip-color-text;
  &:before {
    background: $tooltip-color-bg;
  }
}


.theme-dark {
  $theme-color: set-theme-color($theme-dark);
  $complement-color: lighten(adjust-hue($theme-dark, 180deg), 50%);
  $secondary-color-a: adjust-hue($theme-dark, 120deg);
  $secondary-color-b: adjust-hue($theme-dark, -120deg);
  $tertiary-color-a: adjust-hue($theme-dark, 60deg);
  $tertiary-color-b: adjust-hue($theme-dark, -60deg);
  
  color: $theme-color;
  background: $theme-dark;
  
  // range slider theme
  $track-border-color: $theme-dark !default;
  $track-color: $theme-color !default;
  $track-color-filled: $complement-color !default; 
  $thumb-color-border: $theme-color !default;
  $thumb-color-bg: $complement-color !default;
  $thumb-box-shadow-hover: rgba($complement-color, 0.25) !default;
  $tooltip-color-bg: $theme-color !default;
  $tooltip-color-text: $theme-dark !default;
  
  // General
  input[type=range] {
    @include input-range-border($track-border-color);
  }
  
  // Chrome, Safari
  input[type=range]::-webkit-slider-runnable-track {
    @include runnable-track($track-color);
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    @include runnable-track-focus($track-color);
  }
  input[type=range]::-webkit-slider-thumb {
    @include slider-thumb($thumb-color-border, $thumb-color-bg);
  }
  input[type=range]:hover::-webkit-slider-thumb {
    @include slider-thumb-hover($thumb-box-shadow-hover);
  }
  input[type=range]:focus::-webkit-slider-thumb {
    @include slider-thumb-focus($thumb-box-shadow-hover, $thumb-color-border);
  }
  
  // FF
  input[type=range]::-moz-range-track {
    @include runnable-track($track-color);
  }
  input[type=range]::-moz-range-progress {
    @include runnable-track-filled($track-color-filled, $track-color);
  }
  input[type=range]::-moz-range-thumb {
    @include slider-thumb($thumb-color-border, $thumb-color-bg);
  }
  input[type=range]:hover::-moz-range-thumb {
    @include slider-thumb-hover($thumb-box-shadow-hover);
  }
  input[type=range]:focus::-moz-range-thumb {
    @include slider-thumb-focus($thumb-box-shadow-hover, $thumb-color-border);
  }
  
  // IE
  input[type=range]::-ms-fill-lower {
    @include runnable-track-filled($track-color-filled, $track-color);
  }
  input[type=range]::-ms-fill-upper {
    @include runnable-track($track-color);
  }
  input[type=range]::-ms-thumb {
    @include slider-thumb($thumb-color-border, $thumb-color-bg)
  }
  input[type=range]:hover::-ms-thumb {
    @include slider-thumb-hover($thumb-box-shadow-hover);
  }
  input[type=range]:focus::-ms-thumb {
    @include slider-thumb-focus($thumb-box-shadow-hover, $thumb-color-border);
  }
  input[type=range]:focus::-ms-fill-lower {
    @include runnable-track-filled-focus($track-color-filled);
  }
  input[type=range]:focus::-ms-fill-upper {
    @include runnable-track-focus($track-color);
  }
  
  .range-slider-output {     
    @include slider-tooltip($tooltip-color-bg, $tooltip-color-text);
  }
}

.theme-default {
  $theme-color: set-theme-color($theme-default);
  $complement-color: lighten(adjust-hue($theme-default, 180deg), 20%);
  $secondary-color-a: adjust-hue($theme-default, 120deg);
  $secondary-color-b: adjust-hue($theme-default, -120deg);
  $tertiary-color-a: adjust-hue($theme-default, 60deg);
  $tertiary-color-b: adjust-hue($theme-default, -60deg);
  
  color: $theme-color;
  background: $theme-default;
  
  // Slider
  $track-border-color: $theme-default !default;
  $track-color: $theme-color !default;
  $track-color-filled: $complement-color !default; 
  $thumb-color-border: $theme-color !default;
  $thumb-color-bg: $complement-color !default;
  $thumb-box-shadow-hover: rgba($complement-color, 0.25) !default;
  $tooltip-color-bg: $theme-color !default;
  $tooltip-color-text: $theme-default !default;
  
  // General
  input[type=range] {
    @include input-range-border($track-border-color);
  }
  
  // Chrome, Safari
  input[type=range]::-webkit-slider-runnable-track {
    @include runnable-track($track-color);
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    @include runnable-track-focus($track-color);
  }
  input[type=range]::-webkit-slider-thumb {
    @include slider-thumb($thumb-color-border, $thumb-color-bg);
  }
  input[type=range]:hover::-webkit-slider-thumb {
    @include slider-thumb-hover($thumb-box-shadow-hover);
  }
  input[type=range]:focus::-webkit-slider-thumb {
    @include slider-thumb-focus($thumb-box-shadow-hover, $thumb-color-border);
  }
  
  // FF
  input[type=range]::-moz-range-track {
    @include runnable-track($track-color);
  }
  input[type=range]::-moz-range-progress {
    @include runnable-track-filled($track-color-filled, $track-color);
  }
  input[type=range]::-moz-range-thumb {
    @include slider-thumb($thumb-color-border, $thumb-color-bg);
  }
  input[type=range]:hover::-moz-range-thumb {
    @include slider-thumb-hover($thumb-box-shadow-hover);
  }
  input[type=range]:focus::-moz-range-thumb {
    @include slider-thumb-focus($thumb-box-shadow-hover, $thumb-color-border);
  }
  
  // IE
  input[type=range]::-ms-fill-lower {
    @include runnable-track-filled($track-color-filled, $track-color);
  }
  input[type=range]::-ms-fill-upper {
    @include runnable-track($track-color);
  }
  input[type=range]::-ms-thumb {
    @include slider-thumb($thumb-color-border, $thumb-color-bg);
  }
  input[type=range]:hover::-ms-thumb {
    @include slider-thumb-hover($thumb-box-shadow-hover);
  }
  input[type=range]:focus::-ms-thumb {
    @include slider-thumb-focus($thumb-box-shadow-hover, $thumb-color-border);
  }
  input[type=range]:focus::-ms-fill-lower {
    @include runnable-track-filled-focus($track-color-filled);
  }
  input[type=range]:focus::-ms-fill-upper {
    @include runnable-track-focus($track-color);
  }
  
  .range-slider-output {     
    @include slider-tooltip($tooltip-color-bg, $tooltip-color-text);
  }
}

.theme-light {
  $theme-color: set-theme-color($theme-light);
  $complement-color: adjust-hue($theme-light, 180deg);
  $secondary-color-a: adjust-hue($theme-light, 120deg);
  $secondary-color-b: adjust-hue($theme-light, -120deg);
  $tertiary-color-a: adjust-hue($theme-light, 60deg);
  $tertiary-color-b: adjust-hue($theme-light, -60deg);
  
  color: $theme-color;
  background: $theme-light;
  
  // Slider
  $track-border-color: $theme-light !default;
  $track-color: darken($theme-light, 5%) !default;
  $track-color-filled: darken($tertiary-color-a, 23%) !default; 
  $thumb-color-border: darken($tertiary-color-a, 46%) !default;
  $thumb-color-bg: darken($tertiary-color-a, 30%) !default;
  $thumb-box-shadow-hover: rgba(darken($tertiary-color-a, 46%), 0.25) !default;
  $tooltip-color-bg: $theme-color !default;
  $tooltip-color-text: $theme-light !default;
  
  // General
  input[type=range] {
    @include input-range-border($track-border-color);
  }
  
  // Chrome, Safari
  input[type=range]::-webkit-slider-runnable-track {
    @include runnable-track($track-color);
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    @include runnable-track-focus($track-color);
  }
  input[type=range]::-webkit-slider-thumb {
    @include slider-thumb($thumb-color-border, $thumb-color-bg);
  }
  input[type=range]:hover::-webkit-slider-thumb {
    @include slider-thumb-hover($thumb-box-shadow-hover);
  }
  input[type=range]:focus::-webkit-slider-thumb {
    @include slider-thumb-focus($thumb-box-shadow-hover, $thumb-color-border);
  }
  
  // FF
  input[type=range]::-moz-range-track {
    @include runnable-track($track-color);
  }
  input[type=range]::-moz-range-progress {
    @include runnable-track-filled($track-color-filled, $track-color);
    border-color: darken($track-color, 46%);
  }
  input[type=range]::-moz-range-thumb {
    @include slider-thumb($thumb-color-border, $thumb-color-bg);
  }
  input[type=range]:hover::-moz-range-thumb {
    @include slider-thumb-hover($thumb-box-shadow-hover);
  }
  input[type=range]:focus::-moz-range-thumb {
    @include slider-thumb-focus($thumb-box-shadow-hover, $thumb-color-border);
  }
  
  // IE
  input[type=range]::-ms-fill-lower {
    @include runnable-track-filled($track-color-filled, $track-color);
    border-color: darken($track-color, 46%);
  }
  input[type=range]::-ms-fill-upper {
    @include runnable-track($track-color);
  }
  input[type=range]::-ms-thumb {
    @include slider-thumb($thumb-color-border, $thumb-color-bg);
  }
  input[type=range]:hover::-ms-thumb {
    @include slider-thumb-hover($thumb-box-shadow-hover);
  }
  input[type=range]:focus::-ms-thumb {
    @include slider-thumb-focus($thumb-box-shadow-hover, $thumb-color-border);
  }
  input[type=range]:focus::-ms-fill-lower {
    @include runnable-track-filled-focus($track-color-filled);
  }
  input[type=range]:focus::-ms-fill-upper {
    @include runnable-track-focus($track-color);
  }
  
  .range-slider-output {     
    @include slider-tooltip($tooltip-color-bg, $tooltip-color-text);
  }
}

.box-container {
  padding: 20px;
  margin: 20px auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.1);
}

output {
  color: $pru-red;
}


// global
.form-control {
    width: 100%;
    height: 45px;
    padding: 11px 16px;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-group {
  .help-block {
    display: none;
  }
  &.has-error {
    .help-block {
      display: block;
    }
  }
}

// range slider structure
$track-width: 100%;
$track-width-webkit: 100%;
$track-width-moz: 100%;
$track-width-ms: 100%;
$track-height: 7px !default;
$track-width-border: 1px!default;

$thumb-width-border: 2px !default;
$thumb-radius-border: 50% !default;
$thumb-height-webkit: 28px !default;
$thumb-width-webkit: $thumb-height-webkit !default;
$thumb-height-moz: 24px !default;
$thumb-width-moz: $thumb-height-moz !default;
$thumb-width-ms: 24px !default;
$thumb-height-ms: $thumb-width-ms !default; 


.range-slider-wrap {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  .range-slider-label,
  .range-slider-help-block {
    flex: 0 0 100%;
  }
  .range-slider {
    flex: 1;
    align-self: center;
  }
  .range-slider-output {
    flex: 0 0 10%;
    align-self: center;
  }
}
.range-slider-label {
  display: block;
  font-weight: normal;
}
.has-error .range-slider-label::before {
  margin-right: 4px;
}

input[type=range] {
  -webkit-appearance: none;
  border: $track-width-border solid transparent;
  border-radius: $border-radius-base + 2;
  width: $track-width;
  cursor: pointer;
  display: inline-block;
  padding: 0; // IE
}

// Chrome, Safari
input[type=range]::-webkit-slider-runnable-track {
  border: $track-width-border solid transparent;
  border-radius: $border-radius-base;
  height: $track-height;
  width: $track-width-webkit;
  -webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: $thumb-width-border solid transparent;
  height: $thumb-height-webkit;
  width: $thumb-width-webkit;
  border-radius: $thumb-radius-border;
  margin-top: -11px;
}
input[type=range]:hover::-webkit-slider-thumb {
  box-shadow: 0 0 8px transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 6px transparent;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
}

// FF
input[type=range]::-moz-range-track {
  border: $track-width-border solid transparent;
  border-radius: $border-radius-base;
  height: $track-height;
  width: $track-width-moz;
}
input[type=range]::-moz-range-progress {
  background: transparent;
  border: $track-width-border solid transparent;
  height: $track-height;
  border-radius: $border-radius-base 0 0 $border-radius-base;
}
input[type=range]::-moz-range-thumb {
  border: $thumb-width-border solid transparent;
  height: $thumb-height-moz;
  width: $thumb-width-moz;
  border-radius: $thumb-radius-border;
}
input[type=range]:hover::-moz-range-thumb {
  box-shadow: 0 0 0 4px transparent;
}
input[type=range]:focus::-moz-range-thumb {
  box-shadow: 0 0 6px transparent;
}
input[type=range]:-moz-focusring{ 
  // hide the outline behind the border
  outline: $track-width-border solid transparent;
  outline-offset: -1px;
}

// IE - should come after -webkit-
input[type=range]::-ms-track {
  width: $track-width-ms;
  height: $track-height;

  // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
  background: transparent;

  // leave room for the larger thumb to overflow with a transparent border
  border-color: transparent;
  border-width: 16px 0;

  // remove default tick marks
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: transparent;
  border-radius: 10px;
  border: $track-width-border solid transparent;
}
input[type=range]::-ms-fill-upper {
  background: transparent;
  border-radius: 10px;
  border: $track-width-border solid transparent;
}
input[type=range]::-ms-thumb {
  border: $thumb-width-border solid transparent;
  height: $thumb-height-ms;
  width: $thumb-width-ms;
  border-radius: $thumb-radius-border;
  background: transparent;
  margin-top: -2px;
}
input[type=range]:hover::-ms-thumb {
  box-shadow: 0 0 8px transparent;
}
input[type=range]:focus::-ms-thumb {
  box-shadow: 0 0 8px transparent;
}
input[type=range]:focus::-ms-fill-lower {
  background: transparent;
}
input[type=range]:focus::-ms-fill-upper {
  background: transparent;
}

/* remove tooltip for IE/Edge */
input[type=range]::-ms-tooltip {
  display: none;
}

.range-slider-output {     
    display: inline-block;
    padding: 0.2em 0.75em 0.25em;
    text-align: center;
    border-radius: $border-radius-base;
    position: relative;
    margin-left: 0.5em;
    &:before {
      $size: 6px;
      content: '';
      position: absolute;
      width: $size;
      height: $size;
      display: inline-block;
      left: -3px;
      margin-top: ($size / 2) * -1;
      top: 50%;
      transform: rotate(45deg);
    }
}

input.range-slider[type="text"] {
  @extend .form-control;
}
input.range-slider[type="text"]  + .range-slider-output {
  display: none;
}


.range-slider-large {
  $track-height: 16px;

  $thumb-width-border: 2px;
  $thumb-height-webkit: 48px;
  $thumb-width-webkit: $thumb-height-webkit;
  $thumb-height-moz: 44px;
  $thumb-width-moz: $thumb-height-moz;
  $thumb-width-ms: 44px;
  $thumb-height-ms: $thumb-width-ms;
  
  .range-slider {
    display: block;
    position: relative;
    flex: 0 0 100%;
    margin-top: 80px;
  }
  
  input {
    background-color: transparent;
    padding: 0;
    margin: 0;
  }
  
  input[type=range] {
    width: $track-width;
    border-radius: $border-radius-base * 4;
  }
  
  input[type=range]::-webkit-slider-runnable-track {
    height: $track-height;
    border-radius: $border-radius-base * 4;
  }
  input[type=range]::-webkit-slider-thumb {
    height: $thumb-height-webkit;
    width: $thumb-width-webkit;
    margin-top: -16px;
  }
  input[type=range]::-moz-range-track {
    height: $track-height;
    border-radius: $border-radius-base * 4;
  }
  input[type=range]::-moz-range-progress {
    height: $track-height;
    border-radius: ($border-radius-base * 4) 0 0 ($border-radius-base * 4);
  }
  input[type=range]::-moz-range-thumb {
    height: $thumb-height-moz;
    width: $thumb-width-moz;
  }
  input[type=range]::-ms-track {
    height: $track-height;
    border-width: 22px 0 20px;
  }
  input[type=range]::-ms-thumb {
    height: $thumb-height-ms;
    width: $thumb-width-ms;
  }
  
  .range-slider-output {
    flex: 1;
    font-size: 28px;
    margin-left: 0;
    position: absolute;
    top: 25px;
    transform: translateX(-50%);
    &:before {
      $size: 10px;
      width: $size;
      height: $size;
      left: 50%;
      margin-left: -($size / 2);
      top: 50px;
    }
  }
}

View Compiled

;(function () {

  var sliders = document.getElementsByClassName('js-range-slider-wrap');

  for (var x = 0; x < sliders.length; x++) {
    function updateValue(index) {
      var slider = sliders[index].getElementsByClassName('js-range-slider')[0];
      var output = sliders[index].getElementsByClassName('js-range-slider-output')[0];

      slider.addEventListener('input', getValue);
      slider.addEventListener('change', getValue);

      function getValue() {
        var value = slider.value;

        slider.setAttribute('aria-valuenow', value);
        slider.setAttribute('value', value);
        output.innerHTML = value;
        
        updateOutput();
      }
      
      function updateOutput() {
        if (slider.getAttribute('bubble')) {
          // slider.classList.add('with-bubble');
          // output.classList.add('range-slider-output-top');
          
          var sliderW = slider.offsetWidth;

          var min = slider.getAttribute('min');
          var max = slider.getAttribute('max');
          var now = slider.value;

          var position = Math.ceil((now - min) * 98 / (max - min)) + '%';
          console.log(Math.ceil(sliderW - max));
          output.setAttribute('style', 'left: ' + position);
        }
      }
      
      updateOutput();

    }
    updateValue(x);
  }
} ());

This Pen is owned by Customer Office on CodePen.

See more by @customer-office on CodePen

External CSS

External JavaScript