JSFiddle - React, Tailwind, and code Playground

by Richard

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.js"></script>
<link rel="stylesheet" href="//refreshless.com/noUiSlider/distribute/nouislider.min.css">
<div id="slider"></div>

<span id="val"></span>

CSS

body {
    padding: 30px;
}

#val {
    display: block;
    padding-top: 50px;
}

JavaScript

var range = {
 'min': 0,
  '10%': 10,
  '20%': 30,
  '30%': 50,
  '40%': 100,
'50%': 150,
'60%': 200,
'70%': 250,
'80%': 1000,
'90%': 1200,
 'max': 1900
};

var testSlider = document.getElementById('slider');
var spanValue = document.getElementById('val');
    
noUiSlider.create(testSlider, {
    range: range,
    start: 0,
    snap: true

});

testSlider.noUiSlider.on('update', function( values, handle ){
  if(values[handle] > 0) {
		spanValue.innerHTML = '$' + values[handle];
  } else {
    spanValue.innerHTML = 'no offer'
  }
});