JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

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">
<input data-bind="value: min" />
<input data-bind="value: max" />
<div data-bind="slider: { min: min, max: max }, sliderOptions: {min: 0, max: 100, step: 1}"></div>
<div data-bind="slider: { value: min }, sliderOptions: {min: 0, max: 100, step: 1}"></div>

JavaScript

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().sliderOptions || {};
        var sliderValues = ko.utils.unwrapObservable(valueAccessor());

        if (sliderValues.min !== undefined) {
            options.range = true;
        }

        options.slide = function (e, ui) {
            if (sliderValues.min) {
                sliderValues.min(ui.values[0]);
                sliderValues.max(ui.values[1]);
            } else {
                sliderValues.value(ui.value);
            }
        };

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).slider("destroy");
        });

        $(element).slider(options);
    },
    update: function (element, valueAccessor) {
        var sliderValues = ko.toJS(valueAccessor());
        if (sliderValues.min !== undefined) {
            $(element).slider("values", [sliderValues.min, sliderValues.max]);
        } else {
            $(element).slider("value", sliderValues.value);
        }


    }
};

ViewModel = function () {
    this.min = ko.observable(0);
    this.max = ko.observable(100);
}

ko.applyBindings(new ViewModel());