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.min.js"></script>
<h2>Antall selgere <span id="selgere"></span></h2>
<div class="slide_selgere slider"></div>

<h2>Antall pakker <span id="pakker"></span></h2>
<div class="slide_pakker slider"></div>

Sum: <span id="sum"></span>

JavaScript

$(".slide_selgere").noUiSlider({
    start: [ 5 ],
    step: 1,
    format: wNumb({
    decimals: 0
    }),
    range: {
    'min': [ 1 ],
    'max': [ 10 ]
    }
});

$(".slide_selgere").Link('lower').to($('#selgere'));

$(".slide_pakker").noUiSlider({
start: [ 15 ],
    step: 1,
    format: wNumb({
    decimals: 0
    }),
    range: {
    'min': [ 1 ],
    'max': [ 100 ]
    }

});

$(".slide_pakker").Link('lower').to($('#pakker'));

var sliders = $('.slider'), sum = $('#sum');

sliders.Link().to(function( value ){
    var total = Number(value) + Number(sliders.not($(this)).val());
    sum.html(total);
});