add styles to range inputs

dist/css/datepicker.css

@@ -392,17 +392,30 @@
     Timepicker
    ------------------------------------------------- */
 .datepicker--time {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
   padding: 4px;
   position: relative; }
 
+.datepicker--time-sliders {
+  -webkit-flex: 0 1 138px;
+      -ms-flex: 0 1 138px;
+          flex: 0 1 138px; }
+
 .datepicker--time-label {
-  display: block;
+  display: none;
   font-size: 12px; }
 
 .datepicker--time-current {
-  font-size: 12px;
+  font-size: 16px;
-  position: absolute;
+  -webkit-flex: 1;
-  right: 4px; }
+      -ms-flex: 1;
+          flex: 1;
+  text-align: center; }
 
 .datepicker--time-row {
   display: -webkit-flex;
@@ -411,11 +424,63 @@
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  font-size: 11px; }
+  font-size: 11px;
+  height: 24px;
+  background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 2px no-repeat; }
   .datepicker--time-row input[type='range'] {
+    background: none;
     -webkit-flex: 1;
         -ms-flex: 1;
-            flex: 1; }
+            flex: 1;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none; }
+    .datepicker--time-row input[type='range']::-webkit-slider-thumb {
+      -webkit-appearance: none; }
+    .datepicker--time-row input[type='range']::-ms-tooltip {
+      display: none; }
+    .datepicker--time-row input[type='range']:focus {
+      outline: none; }
+    .datepicker--time-row input[type='range']::-webkit-slider-thumb {
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+      background: #5cc4ef;
+      margin-top: -5px;
+      cursor: pointer; }
+    .datepicker--time-row input[type='range']::-moz-range-thumb {
+      height: 10px;
+      width: 10px;
+      border-radius: 50%;
+      border: none;
+      background: #5cc4ef;
+      cursor: pointer; }
+    .datepicker--time-row input[type='range']::-ms-thumb {
+      height: 10px;
+      width: 10px;
+      border: none;
+      border-radius: 50%;
+      background: #5cc4ef;
+      cursor: pointer; }
+    .datepicker--time-row input[type='range']::-webkit-slider-runnable-track {
+      height: 2px;
+      cursor: pointer;
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-moz-range-track {
+      height: 2px;
+      cursor: pointer;
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-ms-track {
+      border: none;
+      height: 10px;
+      cursor: pointer;
+      color: transparent;
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-ms-fill-lower {
+      background: transparent; }
+    .datepicker--time-row input[type='range']::-ms-fill-upper {
+      background: transparent; }
   .datepicker--time-row span {
     padding: 0 12px; }
 

dist/js/datepicker.js

@@ -1717,15 +1717,17 @@ var Datepicker;
 
 (function (window, $, datepicker) {
     var template = '<div class="datepicker--time">' +
-        '<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
+        '<div class="datepicker--time-sliders">' +
-        '<label class="datepicker--time-label">#{hourLabel}</label>' +
+        '   <label class="datepicker--time-label">#{hourLabel}</label>' +
-        '<div class="datepicker--time-row">' +
+        '   <div class="datepicker--time-row">' +
         '      <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
-        '</div>' +
+        '   </div>' +
         '   <label class="datepicker--time-label">#{minLabel}</label>' +
-        '<div class="datepicker--time-row">' +
+        '   <div class="datepicker--time-row">' +
         '      <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
+        '   </div>' +
         '</div>' +
+        '<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
         '</div>';
     datepicker.Timepicker = function (inst, opts) {
         this.d = inst;

src/js/timepicker.js

@@ -1,14 +1,16 @@
 (function (window, $, datepicker) {
     var template = '<div class="datepicker--time">' +
-        '<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
+        '<div class="datepicker--time-sliders">' +
-        '<label class="datepicker--time-label">#{hourLabel}</label>' +
+        '   <label class="datepicker--time-label">#{hourLabel}</label>' +
-        '<div class="datepicker--time-row">' +
+        '   <div class="datepicker--time-row">' +
         '      <input type="range" name="hours" value="#{hourValue}" min="#{hourMin}" max="#{hourMax}" step="#{hourStep}"/>' +
-        '</div>' +
+        '   </div>' +
         '   <label class="datepicker--time-label">#{minLabel}</label>' +
-        '<div class="datepicker--time-row">' +
+        '   <div class="datepicker--time-row">' +
         '      <input type="range" name="minutes" value="#{minValue}" min="#{minMin}" max="#{minMax}" step="#{minStep}"/>' +
+        '   </div>' +
         '</div>' +
+        '<div class="datepicker--time-current">#{hourValue}:#{minValue}</div>' +
         '</div>';
     datepicker.Timepicker = function (inst, opts) {
         this.d = inst;

src/sass/timepicker.scss

@@ -4,31 +4,126 @@
     Timepicker
    ------------------------------------------------- */
 
+$rangeTrackHeight: 2px;
+$rangeTrackBg: #dedede;
+$rangeThumbSize: 10px;
+$rangeThumbBg: #5cc4ef;
+
 .datepicker--time {
+  display: flex;
+  align-items: center;
+
   padding: $datepickerPadding;
   position: relative;
 }
 
+.datepicker--time-sliders {
+  flex: 0 1 138px;
+}
+
 .datepicker--time-label {
-  display: block;
+  display: none;
   font-size: 12px;
 }
 
 .datepicker--time-current {
-  font-size: 12px;
+  font-size: 16px;
-  position: absolute;
+  flex: 1;
-  right: $datepickerPadding;
+  text-align: center;
 }
 
 .datepicker--time-row {
   display: flex;
   align-items: center;
   font-size: 11px;
+  height: 24px;
+  background: linear-gradient(to right,#dedede,#dedede) left 50%/100% 2px no-repeat;
 
   input[type='range'] {
+    background: none;
     flex: 1;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
     }
 
+    &::-ms-tooltip {
+      display: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    //  Thumb
+    // -------------------------------------------------
+
+    &::-webkit-slider-thumb {
+      height: $rangeThumbSize;
+      width: $rangeThumbSize;
+      border-radius: 50%;
+      background: $rangeThumbBg;
+      margin-top: -$rangeThumbSize/2;
+      cursor: pointer;
+    }
+
+    &::-moz-range-thumb {
+      height: $rangeThumbSize;
+      width: $rangeThumbSize;
+      border-radius: 50%;
+      border: none;
+      background: $rangeThumbBg;
+      cursor: pointer;
+    }
+
+    &::-ms-thumb {
+      height: $rangeThumbSize;
+      width: $rangeThumbSize;
+      border: none;
+      border-radius: 50%;
+      background: $rangeThumbBg;
+      cursor: pointer;
+    }
+
+    //  Track
+    // -------------------------------------------------
+    &::-webkit-slider-runnable-track {
+      height: $rangeTrackHeight;
+      cursor: pointer;
+      background: transparent;
+    }
+
+    &::-moz-range-track {
+      height: $rangeTrackHeight;
+      cursor: pointer;
+      background: transparent;
+    }
+
+    &::-ms-track {
+      border: none;
+      height: $rangeThumbSize;
+      cursor: pointer;
+      color: transparent;
+      background: transparent;
+    }
+
+    &::-ms-fill-lower {
+      background: transparent;
+    }
+    &:focus::-ms-fill-lower {
+
+    }
+    &::-ms-fill-upper {
+      background: transparent;
+    }
+    &:focus::-ms-fill-upper {
+
+    }
+  }
   span {
     padding: 0 12px;
   }