var snapSlider = document.getElementById('slider');

noUiSlider.create(snapSlider, {
  start: [ 10, 200 ],
  snap: true,
  connect: true,
  range: {
    'min': 0,
    '10%': 20,
    '20%': 40,
    '30%': 60,
    '40%': 80,
    '50%': 100,
    '60%': 120,
    '70%': 140,
    '80%': 160,
    '90%': 180,
    'max': 200
  }
});


var snapValues = [
  document.getElementById('slider-snap-value-lower'),
  document.getElementById('slider-snap-value-upper')
];

snapSlider.noUiSlider.on('update', function( values, handle ) {
  snapValues[handle].innerHTML = values[handle];
});