intraday

by jeum

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinFlat.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script>
<div class="range-slider">
    <input type="text" class="js-range-slider" value="" />
</div>
<div class="extra-controls">
  <select onchange="updateStatut(parseInt(this.value))">
    <option value="0">jour ouvrable</option>
    <option value="1">samedi</option>
    <option value="2">dimanche / ferié</option>
  </select>
</div>

CSS

body {
    margin: 40px 15px;
    font-family: Arial, sans-serif;
    font-size: 12px;
}
.range-slider {
    position: relative;
    height: 80px;
}
.extra-controls {
    position: relative;
    border-top: 3px solid #000;
    padding: 10px 0 0;
}


.range-slider{
  margin-top: 80px;
}
.day{
  display: flex;
  position: absolute;
  top: -80px;
  width: 100%;
  height: 20px;
  color: white;
}
.per{
  display: flex;
  position: absolute;
  top: -60px;
  width: 100%;
  height: 20px;
}



.day_0{
  flex: 16;
  background: linear-gradient(to right, #555555, white, #555555, black );
  text-align: right;
  padding-right: 5px;
}
.day_1{
  flex: 8;
  background: linear-gradient(to right, black, #555555 );
  border-left: 1px solid white;
}

.per_0{
  background: #CCC;
}
.per_1{
  background: #f59570;
}
.per_2{
  background: #f15a22;
}

JavaScript

// src : https://github.com/IonDen/ion.rangeSlider
// adv : http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
// cdn : https://cdnjs.com/libraries/ion-rangeslider

var $range = $(".js-range-slider");

$range.ionRangeSlider({
      type: 'double',
      min: 8,
      max: 32,
      step: 0.5,
      min_interval: 0.5,
      from_shadow: true,
      grid: true,
      grid_num: 6,
      grid_snap: true,
      to: 32,
      prettify: function(num){
        num = num > 24 ? num - 24 : num;
        var int = Math.floor(num);
        return int + ':' + ( num > int ? '30' : '00' );
      }
});

// Saving it's instance to var
var slider = $range.data("ionRangeSlider");

updateStatut = function(statut){

	var min = statut ? 8 : 18;
  slider.update({
    from_min: min,
    from: min
	});
  
  var p0 = ['per_0', 'per_1', 'per_2'][statut],
  	  p1 = ['per_1', 'per_1', 'per_2'][statut];
  var d0 = 12,
  		d1 = 13;
  
  $grid = $(".range-slider .irs-grid");
  $grid.append($('<span class="per"><span style="flex: 10;" class="'+ p0 +'"></span><span style="flex: 4;" class="'+ p1 +'"></span><span style="flex: 10;" class="per_2"></span></span>'));
  $grid.append($('<span class="day"><span class="day_0">'+ d0 +'</span><span class="day_1">'+ d1 +'</span></span>'));
}

updateStatut(0);