New to Kendo UI for jQuery? Download free 30-day trial

Filter the ListView by Using Slider Selection


Product Progress Kendo UI ListView for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript


How can I filter the data source of the ListView based on a Slider selection?


The following example demonstrates how to achieve this behavior and display the relevant items in the ListView.

    <h4>Slide to Filter by Unit Price</h4>
    <div id="rangeslider" class="slider">
      <input />
      <input />


    <div id="listView"></div>

    <script type="text/x-kendo-tmpl" id="template">
    <div class="product">
      <img src="${ProductID}.jpg" alt="${ProductName} image" />
        <h3>${ProductName}, $${UnitPrice}</h3>
          <p>${kendo.toString(UnitPrice, "c")}</p>
        min: 1,
        max: 77,
        smallStep: 5,
        largeStep: 10,
        tickPlacement: "both",
        change: function (e) {
          var filters = [],

          filters.push({field: "UnitPrice", operator: "gte", value: e.sender.values()[0]});
          filters.push({field: "UnitPrice", operator: "lte", value: e.sender.values()[1]});

          filter = {
            logic: "and",
            filters: filters

      var dataSource = new{
        transport: {
          read: {
            url: "",
            dataType: "jsonp"
        pageSize: 4

        dataSource: dataSource,
        pageable: true,
        template: kendo.template($("#template").html())

See Also

In this article