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