JSFiddle - React, Tailwind, and code Playground

by manoj

HTML

<script src="https://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.9.0/themes/ui-lightness/jquery-ui.css">
<div id="sliderVals" data-bind="rangeSlider: [MinVal, MaxVal], sliderOptions: {min: 1, max: 10, range: true, step: 1, values: [1,10]}"></div>

<button type="button" data-bind="click: ResetFilter">Reset filter</button>

<table>
    <thead>
        <tr>
            <th>Val</th>
        </tr>
    </thead>
                    
    <tbody data-bind="foreach: filteredVals">
        <tr>
            <td data-bind="text: Val"></td>
        </tr>
    </tbody>
</table>

JavaScript

ko.bindingHandlers.rangeSlider = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var options = allBindingsAccessor().sliderOptions || {};
            var observable = valueAccessor();

            ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
                observable[0](ui.values[0]);
                observable[1](ui.values[1]);
            });
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).slider("destroy");
            });
            ko.utils.registerEventHandler(element, "slide", function (event, ui) {
                observable[0](ui.values[0]);
                observable[1](ui.values[1]);
            });

            $(element).slider(options);
        },
        update: function (element, valueAccessor) {
            console.log("update fired");
            var value = ko.utils.unwrapObservable(valueAccessor());
             if(value instanceof Array)
            {
                console.log(value);
                var value1= ko.utils.unwrapObservable(value[0]);
                var value2= ko.utils.unwrapObservable(value[1]);
                if(value1)
                {
                    value = [value1, value2];
                }
                else value = 0;
            }
            else if (isNaN(value)) value = 0;
            $(element).slider(value.slice ? "values" : "value", value);
        }
    };    

    var InnerModel = function (theVal) {
        var self = this;
        self.Val = ko.observable(theVal);
    }

    var ViewModel = function () {
        var self = this;
        self.MinVal = ko.observable();
        self.MaxVal = ko.observable();
        self.Vals = ko.observableArray();

        for (i = 0; i < 10; i++) {
            self.Vals.push(new InnerModel(i+1));
        }

        self.filteredVals = ko.computed(function () {
            return ko.utils.arrayFilter(this.Vals(), function (item) {
       ...