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>
<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>
            <slider>
            <input type="range" data-highlight="true" data-bind="attr: {'id': id, 'min': min, 'max': max}, value: value, valueUpdate: 'input'" />
                </slider>
                    <template id="netval">
                        Net: <span data-bind="text: value"></span>
                    </template>
        </div>
    </div>

JavaScript

ko.components.register('slider', {

                viewModel: {

                    createViewModel: function (componentInfo) {
                        $(componentInfo.element).slider("refresh");
                        
                    }

                },

                template: { element : 'netval'}

            });

            var viewModel = function (value) {
                var self = this;
                self.value = ko.observable(value);
                self.id = ko.observable("slider-new");
                self.min = ko.observable(10);
                self.max = ko.observable(100);
            };
            var Model = new viewModel(50);
            ko.applyBindings(Model);