ko review slider

by Florian Bar

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p>Score: <span data-bind="text: score"></span></p>
<input type="range" data-bind="rangeSlider: score" step="2" min="0" max="10" /><br>
<input type="text" data-bind="value: score" />

CSS

body { font-family: arial; }

JavaScript

ko.bindingHandlers.rangeSlider = {
    init: function (element, valueAccessor) {
        var observable = valueAccessor();

        $(element)
            .val(observable())
            .on('input', function () {
                observable($(element).val());
            });
    },
    update: function (element, valueAccessor) {
        var observable = valueAccessor();
        $(element).val(observable());
    }
};

function ReviewModel() {
    this.score = ko.observable(6);
}

var reviewModel;

 $(function () {
     reviewModel = new ReviewModel();
     ko.applyBindings(reviewModel);
 });