JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css">
<div data-bind="slider: values, sliderOptions: {min: 6, max: 120, step: 1}"></div>

<div data-bind="slider: value, sliderOptions: {min: 6, max: 120, step: 1}"></div>

<span data-bind="text: valuesJson"></span>

JavaScript

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().sliderOptions || {};
        var observable = valueAccessor();
        
        if(observable().splice) {
            options.range = true;        
        }        
        
        options.slide = function(e, ui) {
            observable(ui.values ? ui.values : ui.value);
        };
        
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).slider("destroy");
        });
        
        $(element).slider(options);
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).slider(value.slice ? "values" : "value", value);

    }
};

ViewModel = function() {
    this.value = ko.observable(10);
    this.values = ko.observable([10, 100]);    
    this.valuesJson = ko.computed(function() {
        return ko.toJSON({ value: this.value, values: this.values});
    }, this);
}

    ko.applyBindings(new ViewModel());