knockoutjs and jquery UI slider - asp.net-mvc-4

Question

I have list collection like:
{Id : "101", Name :"XXX", Fare: 200 },
{Id : "102", Name :"YYY", Fare: 400 },
{Id : "103", Name :"ZZZ", Fare: 500 },
Now I want to implement Jquery UI slider in knockoutJs with min and maximum fare, based on it I will filter my list.
How I can pass min and max value from observable array min and max fare to Slider using knockoutjs?
Updated with Code:
Html
<div class="row">
<div class="span3 well">
<h4>Filter</h4>
<hr />
<div>
<strong>Fare Range</strong>
<br />
Rs <span id="minFare" data-bind="text : minFare" ></span>
- Rs
<span id="maxFare" data-bind="text : maxFare" ></span>
<div id="slider-range"></div>
</div>
<hr />
<div>
<strong >Bus Type</strong>
<ul data-bind="foreach : busTypes">
<li>
<input type="checkbox" > <span data-bind="text : $data"></span>
</li>
</ul>
</div>
</div>
<div class="span9">
<div class="well">
<strong>Sort </strong>
<div data-bind="foreach: sortingColumns" class="btn-group inline " data-toggle="buttons-checkbox">
<div class="btn" data-bind="text : columnName, click : $root.sort">
</div>
</div>
</div>
<section id="no-more-tables">
<table class="table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th>
Travel
</th>
<th>
Deparr
</th>
<th>
Arrive
</th>
<th class="numeric">
Seat
</th>
<th class="numeric">
Fare
</th>
</tr>
</thead>
<tbody data-bind="foreach: busResults">
<tr>
<td data-bind="text: CompanyName" data-title="Travel">
</td>
<td data-bind="text: DepartureTime" data-title="Depart">
</td>
<td data-bind="text: ArrivalTime" data-title="Arrive">
</td>
<td data-bind="text: Seats" data-title="Seat" class="numeric">
</td>
<td data-bind="text: Fare" data-title="Fare" class="numeric">
</td>
<td>
<a class="btn btn-info" href="#" >Select</a>
</td>
</tr>
</tbody>
</table>
</section>
</div>
</div>
Js
$(function () {
$("#slider-range").slider({
range: true,
min: $("#minFare").text(),
max: $("#maxFare").text(),
values: [75, 300],
slide: function (event, ui) {
$("#minFare").text(ui.values[0]);
$("#maxFare").text(ui.values[1]);
//$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
//$("#amount").val("$" + $("#slider-range").slider("values", 0) +
//" - $" + $("#slider-range").slider("values", 1));
});
knockoutjs ViewModel
function busResultsViewModel(param) {
var self = this;
var baseUri = "/api/BusApi/" + param;
self.busResults = ko.observableArray();
self.currentItem = ko.observable('');
self.sortDirection = ko.observable(false);
//Sort By Name
self.sort = function (item) {
var colName = item.columnName == "Travel" ? "CompanyName" : item.columnName;
self.sortDirection(!self.sortDirection());
var test = self.busResults.sort(function (obj1, obj2) {
if (obj1[colName] == obj2[colName]) return 0;
else if (obj1[colName] < obj2[colName])
return -1;
else
return 1;
});
if (self.sortDirection())
self.busResults(test);
else
self.busResults(test.reverse());
};
//Min/Max Fare // Tried
self.minFare = ko.dependentObservable(function () {
var min = 0;
ko.utils.arrayForEach(self.busResults, function (item) {
alert(item.Fare);
if (item.Fare < min) {
min = item.Fare;
}
});
return min;
} );
self.minFare = ko.observable("0");
self.maxFare = ko.observable("800");
self.busTypes = ko.observableArray(["AC", "Non-AC"]);
//Sorting Coumns
self.sortingColumns = ko.observableArray([
{ columnName: "Travel" },
{ columnName: "Fare" }
]);
$.getJSON(baseUri, self.busResults);
}
Model Structure
public class BusResult
{
public int Id { get; set; }
public string CompanyName { get; set; }
public string DepartureDate { get; set; }
public string DepartureTime { get; set; }
public string ArrivalDate { get; set; }
public string ArrivalTime { get; set; }
public string Amenities { get; set; }
public short JourneyHours { get; set; }
public short Seats { get; set; }
public decimal Fare { get; set; }
public IList<string> BusTypes {get; set;}
}

Answer 1

Finally got working:
Html
<span id="minFare" data-bind="text : minFare"></span> - Rs
<span id="maxFare" data-bind="text : maxFare"></span>
<div id="slider-range"></div>
Js
Slider
$("#slider-range").slider({
range: true,
min: vm.minFare(),
max: vm.maxFare(),
step: 1,
values: [vm.minFare(), vm.maxFare()],
slide: function (event, ui) {
vm.minFare(ui.values[0]);
vm.maxFare(ui.values[1]);
}
});
Vm
//Min & Max Slider
function vm()
{
var self = this;
self.minFare = ko.observable();
self.minFare.subscribe(function (newValue) {
//TODO: Filter, min fare changed
});
self.maxFare = ko.observable();
self.maxFare.subscribe(function (newValue) {
//TODO: Filter, max fare changed
});
}