Controle deslizante de bootstrap com matriz de dados definido usando ligações personalizadas de knockout

javascript

ko.bindingHandlers.bootstrapSlider = {
    init: function(element, valueAccessor, allBindingsAccesor, viewModel, bindingContext){
        var opts = ko.utils.unwrapObservable(valueAccessor());
        var array = opts.array;
        var initMin = array != undefined ? 0 : opts.minVal;
        var initMax = array != undefined ? array.length - 1 : opts.maxVal;
        var minValue = opts.minValueObservableName;
        var maxValue = opts.maxValueObservableName;

        $(element).slider({
            min: initMin,
            max: initMax,
            tooltip: 'hide',
            step: array != undefined ? 1 : opts.step,
            value: [initMin, initMax]
        })
        .on('slide', function(evt) {
            var min = evt.value[0];
            var max = evt.value[1];

            //Seteando el observable por nombre como string
            viewModel[minValue](array[min]);
            viewModel[maxValue](array[max]);
        });
        viewModel[minValue](array[initMin]);
        viewModel[maxValue](array[initMax]);
    }
};

var myModel = function(){
    var self = this;

    self.precios = ko.observableArray([10, 100, 500, 3000, 5000, 10000]);
    self.minPrecio = ko.observable();
    self.maxPrecio = ko.observable();
};

ko.applyBindings(new myModel(), $("#Filtro")[0]);

html

<div id="Filtro" class="hero-unit">
        <div class="row-fluid">
            <div class="span3">$<span data-bind="text: minPrecio">-</span></div>
            <div class="span6">
                <input class="slider" type="text" data-bind="bootstrapSlider: { array: precios(), minValueObservableName: 'minPrecio', maxValueObservableName: 'maxPrecio' }" />
            </div>
            <div class="span3">$<span data-bind="text: maxPrecio">-</span></div>            
        </div>
</div>

Ejemplo en jsfiddle

Fuente