bootstrap slider con array de datos definido
bootstrap slider fixed values
HTML
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-slider/css/bootstrap.css">
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-slider/css/slider.css">
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<script src="http://www.eyecon.ro/bootstrap-slider/js/bootstrap-slider.js"></script>
<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>
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];
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([100, 500, 3000, 5000]);
self.minPrecio = ko.observable();
self.maxPrecio = ko.observable();
};
ko.applyBindings(new myModel(), $("#Filtro")[0]);