MaterializeCSS Range

Testing materialize range sliders

by mozfet

HTML

<link rel="stylesheet" href="https://gitcdn.xyz/repo/Dogfalo/materialize/v1-dev/extras/noUiSlider/nouislider.css">
<script src="https://gitcdn.xyz/repo/Dogfalo/materialize/v1-dev/extras/noUiSlider/nouislider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/2.2.2/moment-duration-format.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">


<div class="container">
  <h1>Material Duration Slider</h1>
  <div class="row">
    <div class="col s2">a</div> 
    <div class="col s6">
      <div id="test-slider"></div>  
    </div>
    <div class="col s2">a</div> 
  </div>  
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  font-family: 'Roboto', sans-serif;
}

.noUi-target {
  display: flex;
  align-items: center;
}

JavaScript

const durationFormatter = {
 to: function ( value ) {
    const minutes = Math.round(value)
    const human = moment.duration(minutes, 'minutes')
        .format('h[h]mm[m]')
    // console.log(`to ${value} human ${human}`)
    return human
  },
  from: function ( value ) {
    let hours = value.match(/^\d{1,2}h/g)
    hours = Number(hours?hours[0].slice(0, -1):'0')
    let mins = value.match(/\d{1,2}m$/g)
    mins = Number(mins?mins[0].slice(0, -1):'0')
    const result = hours*60 + mins
    // console.log(`from ${value} to ${result}`)
    return result
  }
}

// on document ready
$(function() {
  const slider = $('#test-slider').get(0)
  noUiSlider.create(slider, {
    start: "30m",
    step: 5,
    orientation: 'horizontal',
    tooltips: durationFormatter,
    range: {
      'min': 0,
      'max': 720
    },
    format: durationFormatter,
    pips: {
      mode: 'positions',
      stepped: true,
      values: [0, 25, 50, 75, 100],
      format: durationFormatter,
      density: 5
    }
  })
})