# Change Grid Pager to Slider

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Progress® Kendo UI® Grid for jQuery</td>
 </tr>
 <tr>
  <td>Operating System</td>
  <td>Windows 10 64bit</td>
 </tr>
 <tr>
  <td>Preferred Language</td>
  <td>JavaScript</td>
 </tr>
</table>

## Description

How can I change the default pager of the Kendo UI Grid to a slider?

## Solution

1. Remove the default pager buttons on the first [`dataBound`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid/events/databound) event.
2. Create a Kendo UI Slider in their place.
3. Change the page of the Grid DataSource on the [`change`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/slider/events/change) event of the Slider.

> When you apply this approach, the [`page`](https://www.telerik.com/kendo-jquery-ui/documentation/api/data/datasource/methods/page) method of the Grid does not fire.

```dojo
<div id="grid"></div>

<script>
  var sliderCreated = false;  

  $("#grid").kendoGrid({
    columns: [
      { field: "productName" },
      { field: "category" }
    ],
    dataSource: [
      { productName: "Tea", category: "Beverages" },
      { productName: "Coffee", category: "Beverages" },
      { productName: "Ham", category: "Food" },
      { productName: "Bread", category: "Food" },
      { productName: "Cheese", category: "Food" },
      { productName: "Milk", category: "Beverages" }
    ],
    pageable: {
      pageSize: 2
    },
    dataBound: onDataBound
  });

  function onChange(e){
    var grid = $("#grid").data("kendoGrid");

    grid.dataSource.page(e.value)
  };

  function onDataBound(e){
    if(!sliderCreated){
      sliderCreated = true;
      var max = e.sender.dataSource.totalPages();


      $(".k-grid-pager").find("a, ul").each(function(i) {
        $(this).remove()
      });
      $(".k-grid-pager").prepend($("<input id='slider' />"));
      $("#slider").kendoSlider({
        min: 1,
        max: max,
        tickPlacement: "none",
        change: onChange
      });
    }
  };
</script>

<style>
  #grid .k-slider-horizontal{
    margin: 0.4em 0.4em 0 0.4em;
  }  
</style>
```

## See Also

* [JavaScript API Reference of the Data Grid](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid)