JSFiddle - React, Tailwind, and code Playground

by leongersen

HTML

<link rel="stylesheet" href="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.min.css">
<script src="http://refreshless.com/nouislider/source/distribute/jquery.nouislider.all.js"></script>
<div id="slider"></div>

<div><strong>Test Score: </strong><span id="score"></span></div>
<div><strong>GPA: </strong><span id="gpa"></span></div>

CSS

#slider { margin: 50px }

JavaScript

var slider = $("#slider"), testScore = $("#score"), GPA = $("#gpa");

slider.noUiSlider({
    range: { min: -50, max: 50 },
    start: 0,
    format: wNumb({ decimals: 0 })
});

slider.Link().to(testScore, function( value ){
    $(this).html( 50 - Number(value) );
});

slider.Link().to(GPA, function( value ){
    $(this).html( 50 + Number(value) );
});