JSFiddle - React, Tailwind, and code Playground

by bandrzejczak

HTML

<div id="RanSlider"></div>
<div id="CoreSlider"></div>
RAM Min: <span id="RanSlider-valuemin"></span><br />
RAM Max: <span id="RanSlider-valuemax"></span><br />
Cores: <span id="CoreSlider-valuemin"></span><br />
Cost: <span id="Cost"></span>

JavaScript

function showValues(event, ui) {
        var values;
        if (!ui.values) {
            values = $("#" + event.target.id).slider("values");
        } 
        else {
            values = ui.values;
        }
        if (values[0] == values[1]) {
            return false;
        } 
        else {
            values[0] % 1 == 0;
            values[1] % 1 == 0;
            $("#" + event.target.id + "-valuemin").html(parseInt(values[0]));
            $("#" + event.target.id + "-valuemax").html(parseInt(values[1])); 
        }
       calculateCost();
    }
function calculateCost() {
        var base = 24;
        var cores = parseInt($("#CoreSlider-valuemin").text())*5;
        var ram = parseInt($("#RanSlider-valuemin").text())*2 + parseInt($("#RanSlider-valuemax").text());
        var cost = base + cores + ram;                
        $("#Cost").html(cost);
    }
$(function() {$( "#RanSlider" ).slider({range: true,min: 1,max: 64,step: 1,values: [4, 16],slide: showValues,create: showValues,change: showValues});});
$(function() {$( "#CoreSlider" ).slider({range: false,min: 1,max: 16,step: 1,values: [2],slide: showValues,create: showValues,change: showValues});});

$(calculateCost);