<div id="wrap">

    <!-- section -->
    <div class="section">
      <div class="center">

        <div id="range">
          <input class="menu__range menu__range--day" type="range" value="50" min="0" max="100">
        </div>

      </div>
    </div>
    <!--/section -->

  </div>

html,
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #555;
  background: #fff;
}

* {
  box-sizing: border-box;
}

#wrap {
  position: relative;
}

.section {
  padding: 40px 20px;
  border-bottom: 1px solid #ddd;

  &:last-child {
    border-bottom: 0;
  }

  &--d {
    background: #000;
  }
}

#range {
  padding: 30px;
}

.menu {
  &__range {
    -webkit-appearance: none;
    outline: none;
    position: relative;
    width: 300px;
    height: 6px;
    border-radius: 20px;
    background: #ddd;

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      background-image: radial-gradient(at center center, green, green 4px, white 4px);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(0,0,0, .5);
    }

    &--day {
      background: #ddd;

    }

    &--night {
      background: #ddd;

    }
  }
}

$(function () {   
  $('.menu__range').on('change', function() {
    var $range = $(this),
      rangeVal = $range.val(),
      classPref = 'menu__range--',
      classes = ['day', 'night'];
    
    $range
      .toggleClass(classPref + classes[0])
      .toggleClass(classPref + classes[1]);
    
  });
});