JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<head>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

</head>

<body>

Finish these items in <span id="curr-tasks_time" class="calc_number">1</span> hours
            <div id="tasks_time">
            </div>
           
</body>

CSS

<style>

    .ui-widget-content { border: 1px solid #ccc; background: #ff9900 url(images/ui-bg_flat_100_ff9900_40x100.png) 50% 50% repeat-x; color: #222222; }
    .ui-widget-header { border: 1px solid #aaaaaa; background: #797979 url(images/ui-bg_highlight-soft_75_797979_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }

    .ui-slider { position: relative; text-align: left; }
    .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
    .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

    .ui-slider-horizontal { height: .8em; }
    .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
    .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%;  }
    .ui-slider-horizontal .ui-slider-range-min { left: 0;  }
    .ui-slider-horizontal .ui-slider-range-max { right: 0;}

    </style>

JavaScript

$(document).ready(function(){

            function update() {
                var tasks_time = $('#tasks_time').slider('value');
                var tasks_done = $('#tasks_done').slider('value');
                var total_cost = (tasks_time * 4 * tasks_done) / (tasks_done * 3);
                var credits_needed = Math.round((total_cost / 10)+1);
                $("#total_cost").text(total_cost.toFixed(2));
                $("#curr-tasks_time").text(tasks_time);
                $("#curr-tasks_done").text(tasks_done);
                $("#credits_needed").text(credits_needed.toFixed(0));
                
            }

           $( "#tasks_time" ).slider({
                range: "min",
                value: 37,
                min: 1,
                max: 700,
                slide: function() {
                    update();
                }
            });


        });