title: Angular 4/6 materiel slider, time scale sliders for 24 hours
body: <p>I am using Angular Material to create a slider. This slider is for 24 hours and I want to display the value of slider on the side. 
  The following things are working:</p>
  
  <ol>
  <li>Getting the value of slider on change with <code>(change)</code> event
  .html</li>
  </ol>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-slider style="width:50%" thumbLabel name="range1" #timeSlider type="range" tickInterval="1" step="0.5" min="1" max="24"
                  (change)="onChangeRange(timeSlider.value)"&gt;
  &lt;/mat-slider&gt;
  </code></pre>
  
  <p>.ts</p>
  
  <pre class="lang-ts prettyprint-override"><code>onChangeRange(rangeValue: any) {
    console.log(rangeValue);
    this.showTime = rangeValue;
  }
  </code></pre>
  
  <p>Issues:</p>
  
  <ol>
  <li>I want to show the value of selected in form of time <code>HH:mm</code>, also below is interpolation I tried to use to convert <code>type: number</code> value in time format but nothing is working</li>
  </ol>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button mat-raised-button class="displayTimeBtn"&gt;
    &lt;span&gt;
      {{showTime}}
      &lt;!-- {{showTime | date:"shortTime"}} --&gt;
    &lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <ol start="2">
  <li>I also want to change the display of "thumb label"  </li>
  </ol>
  
  <p>What it looks like as of now:</p>
  
  <p><a href="https://i.stack.imgur.com/pLQK7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pLQK7.png" alt="Current slider"></a></p>