JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.4/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<div id="slider-non-linear"></divd>

CSS

#slider-non-linear {
  height: 15px;
  width: 600px;
  margin: 50px auto;
}

JavaScript

var nonLinearSlider = document.getElementById('slider-non-linear');

noUiSlider.create(nonLinearSlider, {
    start: 1,
    pips: {
    	mode: 'values',
    	values: [1, 5, 7, 9, 10],
      format: wNumb({
        decimals: '1',
        mark: '.'               
      }),
    	density: 4
    },    
    range: {
        'min': [1, 0.1],
        '25%': [5, 0.1],
        '50%': [7, 0.1],
        '75%': [9, 0.1],
        'max': [10, 0.1]                
    },
    tooltips: wNumb({
      decimals: '1',
      mark: '.'
    }),
    behaviour: 'tap',    
});