JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<div data-role="page">
        <div data-role="header">
            <h1>Slider Control</h1>
        </div>

        <div data-role="main" class="ui-content">
            
                <label for="points">Points:</label>
                <input type="range" data-highlight="true"  data-bind="attr: {'id': id, 'min': min, 'max': max}, value: value, valueUpdate: 'input'" />
                Net: <span data-bind="text: value"></span>
        </div>
    </div>

JavaScript

var viewModel = {
        id: ko.observable("slider-new"),
        min: ko.observable(10),
        max: ko.observable(100),
        value: ko.observable(20) 
    };
   ko.applyBindings(viewModel);