Graphical Glitch on Radgrid page slider

[Alex]

We experience this graphical glitch sporadically on many of our pages which utilise the RadGrid control but have been unable to find a cause.

Here is the code for this particular grid:

<telerik:RadGrid ID="gridUsers" runat="server" Width="1000" AutoGenerateColumns="false"
                   AllowPaging="True" PageSize="10" AllowMultiRowSelection="false" OnNeedDataSource="gridUsers_NeedDataSource"
                  OnDeleteCommand="gridUsers_DeleteCommand" >
                <MasterTableView ClientDataKeyNames="UserKey,GroupID,GroupName,UserName,Description,EmailAddress,Timeout,DefaultHomePage,
                FullName,Phone,SMS,Address1,Address2,Address3,PostCode,Private,PrimaryContact,Comments,AllowLogon,ExportReportAccessLevel" DataKeyNames="UserKey,UserName" >
            <Columns>
            <telerik:GridBoundColumn DataField="UserKey" Visible="false" />
                 <telerik:GridBoundColumn DataField="GroupName" Visible="false" />
                  <telerik:GridBoundColumn DataField="GroupID" Visible="false" />

                <telerik:GridBoundColumn HeaderText="<%$ Resources:Common, USERNAME %>" DataField="UserName" HeaderStyle-Width="150px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="<%$ Resources:Common, DESCRIPTION %>" DataField="Description"  HeaderStyle-Width="150px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="<%$ Resources:Common, EMAIL_ADDRESS %>" DataField="EmailAddress"  HeaderStyle-Width="150px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="<%$ Resources:Common, SESSION_TIMEOUT %>" DataField="Timeout"  HeaderStyle-Width="100px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="<%$ Resources:Common, CONTACT_NAME %>" DataField="FullName"  HeaderStyle-Width="150px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="<%$ Resources:Common, PHONE %>" DataField="Phone"  HeaderStyle-Width="150px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn HeaderText="<%$ Resources:Common, PRIMARY_GROUP %>" DataField="GroupName"  HeaderStyle-Width="150px">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="SMS" Visible="false" />
                 <telerik:GridBoundColumn DataField="Address1" Visible="false" />
                  <telerik:GridBoundColumn DataField="Address2" Visible="false" />
                  <telerik:GridBoundColumn DataField="Address3" Visible="false" />
                 <telerik:GridBoundColumn DataField="PostCode" Visible="false" />
                  <telerik:GridBoundColumn DataField="Private" Visible="false" />
                   <telerik:GridBoundColumn DataField="PrimaryContact" Visible="false" />
                    <telerik:GridBoundColumn DataField="Comments" Visible="false" />
                     <telerik:GridBoundColumn DataField="AllowLogon" Visible="false" />
   <telerik:GridBoundColumn DataField="ExportReportAccessLevel" Visible="false" />
   <telerik:GridBoundColumn DataField="DefaultHomePage" Visible="false" />
            </Columns>
        </MasterTableView>
        <PagerStyle Mode="Slider" AlwaysVisible="true" ></PagerStyle>

       <ClientSettings>
           <ClientEvents OnRowContextMenu="DisplayUsersContextMenu" OnRowSelected="gridUsers_onItemSelect"/>
            <Selecting AllowRowSelect="true" />

        </ClientSettings>
                </telerik:RadGrid>

[Venelin]

Hi Alex,

I am afraid that the issue is not replicating with the provided code. Do you replicate it with only this markup? If not please answer to the following questions that will help to find the source of the problem:

1. Which version of the controls do you use?
2. In which browsers do you observe this issue?
3. Are there any custom styles which can interfere with slider's styles. If you use custom CSS please share it too. It's very likely the problem to be there.

Regards,
Venelin
Telerik

[Alex]

We are using version 2013.2.717.35

I believe the CSS has been changed, in the process of downloading the untouched telerik toolkit to do a comparison.
Unfortunately I do not know of a reliable way to reproduce this error it just seems to pop up on occasion. Most of the time it only appears when my boss is looking over my shoulder.

The CSS we're using for this grid control is as follows:

.RadGrid_Silk {
  border: 1px solid #d9d9d9;
  background: white;
  color: #333333;
  font: normal 13px Arial, Helvetica, sans-serif;
  line-height: 22px; }
  .RadGrid_Silk .rgMasterTable,
  .RadGrid_Silk .rgDetailTable,
  .RadGrid_Silk .rgGroupPanel table,
  .RadGrid_Silk .rgCommandRow table,
  .RadGrid_Silk .rgEditForm table,
  .RadGrid_Silk .rgPager table {
    font: normal 13px Arial, Helvetica, sans-serif;
    line-height: 22px; }
  .RadGrid_Silk .rgSave,
  .RadGrid_Silk .rgAdd,
  .RadGrid_Silk .rgRefresh,
  .RadGrid_Silk .rgEdit,
  .RadGrid_Silk .rgDel,
  .RadGrid_Silk .rgExpand,
  .RadGrid_Silk .rgCollapse,
  .RadGrid_Silk .rgSortAsc,
  .RadGrid_Silk .rgSortDesc,
  .RadGrid_Silk .rgUpdate,
  .RadGrid_Silk .rgCancel,
  .RadGrid_Silk .rgUngroup {
    background-image: url('Common/radActionsSprite.png'); }
  .RadGrid_Silk .rgFilter,
  .RadGrid_Silk .rgPageFirst,
  .RadGrid_Silk .rgPagePrev,
  .RadGrid_Silk .rgPageNext,
  .RadGrid_Silk .rgPageLast {
    background-image: url('Grid/sprite.png'); }

.GridToolTip_Silk {
  font: normal 13px Arial, Helvetica, sans-serif;
  line-height: 22px; }

.RadGrid_Silk .rgHeader:first-child,
.RadGrid_Silk th.rgResizeCol:first-child,
.RadGrid_Silk .rgFilterRow > td:first-child,
.RadGrid_Silk .rgRow > td:first-child,
.RadGrid_Silk .rgAltRow > td:first-child {
  border-left-width: 0;
  padding-left: 8px; }
.RadGrid_Silk .rgHeader,
.RadGrid_Silk th.rgResizeCol,
.RadGrid_Silk .rgHeaderWrapper,
.RadGrid_Silk .rgFilterRow {
  background-color: #e6e6e6;
  border-bottom: 1px solid white;
  text-align: left;

  }
  .RadGrid_Silk .rgHeader
  {
    background: #d6d5d4 url('../Common/Gradients/radGradientHardLightV50.png') 0 0 repeat-x;
  _background-image: none;
  background-image: -webkit-linear-gradient(top, white 0%, #d6d5d4 100%);
  background-image: -moz-linear-gradient(top, white 0%, #d6d5d4 100%);
  background-image: -ms-linear-gradient(top, white 0%, #d6d5d4 100%);
  background-image: -o-linear-gradient(top, white 0%, #d6d5d4 100%);
  background-image: linear-gradient(top, white 0%, #d6d5d4 100%);
  box-shadow: none;
  }
.RadGrid_Silk .rgHeaderDiv {
  border-right-color: white; }
.RadGrid_Silk .rgMultiHeaderRow th.rgHeader, .RadGrid_Silk .rgMultiHeaderRow th.rgResizeCol {
  border: 0;
  border-bottom: 1px solid white;
  border-left: 1px solid white; }
.RadGrid_Silk th.rgSorted {
  background-color: #c1c1c1; }
  .RadGrid_Silk th.rgSorted, .RadGrid_Silk th.rgSorted a {
    color: #333333; }
.RadGrid_Silk .rgHeader {
  color: #878787;
  text-transform: uppercase;
  font-size: 9px; }
  .RadGrid_Silk .rgHeader a {
    color: #878787; }
  .RadGrid_Silk .rgHeader,
  .RadGrid_Silk .rgHeader a {
    text-decoration: none;
    font-weight: normal;
    }
.RadGrid_Silk .rgRow td,
.RadGrid_Silk .rgAltRow td,
.RadGrid_Silk .rgEditRow td {
  border-style: solid;
  border-bottom: 1px solid #e3e3e3;
  border-width: 0 0 1px;
}

  .RadGrid_Silk .rgRow td,
  .RadGrid_Silk .rgAltRow td,
  .RadGrid_Silk .rgEditRow td,
  .RadGrid_Silk .rgFooter td {
    line-height: 12px;
    height: 12px ;
    font-size: 12px;}

    /* .rPager,
    .rgPagerCell,
    .rgPagerCell Slider
    {
        height: 10px !important;
    } */
    .rgSliderLabel
    {
    float: left !important;
    margin-left: 5px;
    }

    .RadGrid_Silk .rgInfoPart {
    float: right !important;
    position: relative;
    }

.RadGrid_Silk .rgRow a,
.RadGrid_Silk .rgAltRow a, .RadGrid_Silk tr.rgEditRow a,
.RadGrid_Silk .rgFooter a,
.RadGrid_Silk .rgEditForm a {
  color: #000; }
.RadGrid_Silk .rgHoveredRow {
  background: #e5e5e5; }
.RadGrid_Silk .rgMasterTable .rgSelectedCell,
.RadGrid_Silk .rgSelectedRow {
  color: #333333;
  background: #fff1cc; }
.RadGrid_Silk .rgSelectedCell a,
.RadGrid_Silk .rgSelectedRow a {
  color: #333333; }
.RadGrid_Silk .rgMasterTable .rgActiveCell,
.RadGrid_Silk .rgActiveRow {
  color: #333333;
  background: #fffae8; }
  .RadGrid_Silk .rgMasterTable .rgActiveCell input, .RadGrid_Silk .rgMasterTable .rgActiveCell a,
  .RadGrid_Silk .rgActiveRow input,
  .RadGrid_Silk .rgActiveRow a {
    color: #333333; }
.RadGrid_Silk .rgHoveredRow {
  background: #bbeaf3;
  color: #333333; }
  .RadGrid_Silk .rgHoveredRow a {
    color: #333333; }
.RadGrid_Silk .rgSorted {
  background-color: #f3f3f3;
  color: black; }
.RadGrid_Silk .rgSelectedRow .rgSorted {
  background-color: #f3efe3; }
.RadGrid_Silk .rgHoveredRow .rgSorted {
  background-color: #c3e4eb; }
.RadGrid_Silk .rgEditRow td {
  border-color: #999; }
.RadGrid_Silk .rgDrag {
  background-image: url('Grid/rgDrag.gif'); }
.RadGrid_Silk .rgFooterDiv,
.RadGrid_Silk .rgFooter,
.RadGrid_Silk .rgFooterWrapper {
  background: #e4e4e4; }
.RadGrid_Silk .rgFooterWrapper {
  border-top: 0 none; }
.RadGrid_Silk .rgPager {
  background-color: #e6e6e6;
  color: #555555; }
.RadGrid_Silk .rgWrap,
.RadGrid_Silk .rgPager .rgPagerButton,
.RadGrid_Silk .rgPager .riSingle .riTextBox {
  line-height: 30px;
  height: 29px; }
.RadGrid_Silk td.rgPagerCell,
.RadGrid_Silk .rgPager .rgStatus {
  border: 1px solid #d9d9d9;
  border-width: 1px 0; }
.RadGrid_Silk .rgStatus div {
  background-image: url('Common/loading_small.gif'); }
.RadGrid_Silk .rgInfoPart strong {
  color: black; }

.RadGrid_Silk .rgPageFirst,
.RadGrid_Silk .rgPagePrev,
.RadGrid_Silk .rgPageNext,
.RadGrid_Silk .rgPageLast {
  width: 30px;
  height: 30px; }
.RadGrid_Silk .rgPageFirst {
  background-position: 0 -150px; }
  .RadGrid_Silk .rgPageFirst:hover {
    background-position: 0 -350px; }
  .RadGrid_Silk .rgPageFirst:active {
    background-position: 0 -550px; }
.RadGrid_Silk .rgPagePrev {
  background-position: 0 -200px; }
  .RadGrid_Silk .rgPagePrev:hover {
    background-position: 0 -400px; }
  .RadGrid_Silk .rgPagePrev:active {
    background-position: 0 -600px; }
.RadGrid_Silk .rgPageNext {
  background-position: 0 -250px; }
  .RadGrid_Silk .rgPageNext:hover {
    background-position: 0 -450px; }
  .RadGrid_Silk .rgPageNext:active {
    background-position: 0 -650px; }
.RadGrid_Silk .rgPageLast {
  background-position: 0 -300px; }
  .RadGrid_Silk .rgPageLast:hover {
    background-position: 0 -500px; }
  .RadGrid_Silk .rgPageLast:active {
    background-position: 0 -700px; }
.RadGrid_Silk .rgPager .rgPagerButton {
  background-image: url('../Common/Gradients/radGradientDarkV20.png');
  _background-image: none;
  background-repeat: repeat-x;
  border-color: #c9c9c9;
  color: #3b3b3b;
  background-color: #e3e3e3;
  background-image: -webkit-linear-gradient(top, #fefefe 0%, #e3e3e3 100%);
  background-image: -moz-linear-gradient(top, #fefefe 0%, #e3e3e3 100%);
  background-image: -ms-linear-gradient(top, #fefefe 0%, #e3e3e3 100%);
  background-image: -o-linear-gradient(top, #fefefe 0%, #e3e3e3 100%);
  background-image: linear-gradient(top, #fefefe 0%, #e3e3e3 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid #c9c9c9;
  color: #3b3b3b;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif; }
.RadGrid_Silk .rgNumPart a {
  border-radius: 4px;
  line-height: 28px;
  color: #333333;
  margin-right: 1px;
  margin-top: 1px; }
  .RadGrid_Silk .rgNumPart a:hover {
    color: black;
    background-color: #d6d6d6;
    background-image: -webkit-linear-gradient(top, #d6d6d6 0%, #929292 100%);
    background-image: -moz-linear-gradient(top, #d6d6d6 0%, #929292 100%);
    background-image: -ms-linear-gradient(top, #d6d6d6 0%, #929292 100%);
    background-image: -o-linear-gradient(top, #d6d6d6 0%, #929292 100%);
    background-image: linear-gradient(top, #d6d6d6 0%, #929292 100%); }
  .RadGrid_Silk .rgNumPart a.rgCurrentPage {
    background: none repeat scroll 0 0 #cccccc;
    border: 1px solid #f9f9f9;
    box-shadow: 0 0 1px 1px rgba(72, 72, 72, 0.4) inset;
    color: black;
    margin-top: 0; }
.RadGrid_Silk .rgSortAsc {
  background-position: -17.5px -18px;
  height: 14px;
  width: 15px; }
  .RadGrid_Silk .rgSortAsc:hover {
    background-position: -67.5px -18px; }
.RadGrid_Silk .rgSortDesc {
  background-position: -17.5px -68px;
  height: 14px;
  width: 15px; }
  .RadGrid_Silk .rgSortDesc:hover {
    background-position: -67.5px -68px; }

.RadGrid_Silk .rgFilterRow .riSingle .riTextBox {
  height: 28px; }
.RadGrid_Silk .rgFilterRow td {
  border-bottom: 1px solid #d9d9d9; }
.RadGrid_Silk .rgFilterRow input {
  vertical-align: top; }
.RadGrid_Silk .rgFilter {
  width: 32px;
  height: 32px; }
.RadGrid_Silk .rgFilter {
  background-position: 0 0; }
  .RadGrid_Silk .rgFilter:hover {
    background-position: 0 -50px; }
.RadGrid_Silk:hover,
.RadGrid_Silk .rgFilterActive {
  background-position: 0 -100px; }
.RadGrid_Silk input.rgFilterBox {
  border-color: #d9d9d9;
  font: 12px "segoe ui",arial,sans-serif;
  color: #000;
  height: 21px;
  vertical-align: top;
  }
  .RadGrid_Silk .rgFilterBox {
    margin: 3px !important;
    height: 15px !important;
    }
.RadMenu_Silk .rgHCMClear,
.RadMenu_Silk .rgHCMFilter {
  border-color: #7e7e7e;
  background: #25a0da;
  color: #000;
  font-family: "segoe ui",arial,sans-serif;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0; }
.RadMenu_Silk .rgHCMClear:hover,
.RadMenu_Silk .rgHCMFilter:hover {
  border-color: #c98400;
  background-color: #ffe79c;
  color: #882501; }

.GridContextMenu_Silk .rmLeftImage {
  background-image: url('../Common/Grid/contextMenu.gif'); }
.GridContextMenu_Silk .rgHCMSortAsc .rmLeftImage {
  background-position: 0 0; }
.GridContextMenu_Silk .rgHCMSortDesc .rmLeftImage {
  background-position: 0 -40px; }
.GridContextMenu_Silk .rgHCMUnsort .rmLeftImage {
  background-position: 0 -80px; }
.GridContextMenu_Silk .rgHCMGroup .rmLeftImage {
  background-position: 0 -120px; }
.GridContextMenu_Silk .rgHCMUngroup .rmLeftImage {
  background-position: 0 -160px; }
.GridContextMenu_Silk .rgHCMCols .rmLeftImage {
  background-position: 0 -200px; }
.GridContextMenu_Silk .rgHCMFilter .rmLeftImage {
  background-position: 0 -240px; }
.GridContextMenu_Silk .rgHCMUnfilter .rmLeftImage {
  background-position: 0 -280px; }

.RadGrid_Silk .rgGroupPanel {
  background-color: #e6e6e6;
  border: 0;
  border-bottom: 1px solid white;
  color: #5f5f5f; }
  .RadGrid_Silk .rgGroupPanel td {
    border: 0;
    padding: 3px 4px; }
    .RadGrid_Silk .rgGroupPanel td td {
      padding: 0; }
.RadGrid_Silk .rgUngroup {
  background-position: -17.5px -2817.5px;
  width: 15px;
  height: 15px; }
  .RadGrid_Silk .rgUngroup:hover {
    background-position: -67.5px -2817.5px; }
.RadGrid_Silk .rgGroupItem {
  background-image: url('../Common/Gradients/radGradientDarkV20.png');
  _background-image: none;
  background-repeat: repeat-x;
  border-color: #c9c9c9;
  color: #3b3b3b;
  background-color: #e3e3e3;
  background-image: -webkit-linear-gradient(top, #fefefe 0%, #e3e3e3 100%);
  background-image: -moz-linear-gradient(top, #fefefe 0%, #e3e3e3 100%);
  background-image: -ms-linear-gradient(top, #fefefe 0%, #e3e3e3 100%);
  background-image: -o-linear-gradient(top, #fefefe 0%, #e3e3e3 100%);
  background-image: linear-gradient(top, #fefefe 0%, #e3e3e3 100%);
  color: #3b3b3b;
  border: 1px solid #c9c9c9;
  border-radius: 4px; }
.RadGrid_Silk .rgGroupHeader {
  background: #e3e3e3 url('../Common/Gradients/radGradientLightV50.png') 0 0 repeat-x;
  _background-image: none;
  background-image: -webkit-linear-gradient(top, white 0%, #f2f2f2 30%, #d5d4d3 100%);
  background-image: -moz-linear-gradient(top, white 0%, #f2f2f2 30%, #d5d4d3 100%);
  background-image: -ms-linear-gradient(top, white 0%, #f2f2f2 30%, #d5d4d3 100%);
  background-image: -o-linear-gradient(top, white 0%, #f2f2f2 30%, #d5d4d3 100%);
  background-image: linear-gradient(top, white 0%, #f2f2f2 30%, #d5d4d3 100%);
  box-shadow: 0 1px 3px #d7d7d7;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 22px;
  color: #878787; }
  .RadGrid_Silk .rgGroupHeader td {
    padding: 5px 8px 2px;
    border-bottom: 1px solid #e3e3e3; }
.RadGrid_Silk .rgExpand {
  background-position: -16px -168px; }
.RadGrid_Silk .rgCollapse {
  background-position: -66px -68px; }
.RadGrid_Silk .rgEditForm {
  border-bottom: 1px solid #999; }
.RadGrid_Silk .rgUpdate {
  background-position: 0 -1800px; }
.RadGrid_Silk .rgCancel {
  background-position: 0 -1850px; }
.RadGrid_Silk .rgDetailTable {
  border-color: #ccc; }
.RadGrid_Silk td.rgExpandCol {
  border-bottom-color: #e6e6e6;
  background-color: #e6e6e6; }
.RadGrid_Silk .rgCommandRow {
  background: #e3e3e3 url('../Common/Gradients/radGradientLightV50.png') 0 0 repeat-x;
  _background-image: none;
  background-image: -webkit-linear-gradient(top, white 0%, #f2f2f2 30%, #d5d4d3 100%);
  background-image: -moz-linear-gradient(top, white 0%, #f2f2f2 30%, #d5d4d3 100%);
  background-image: -ms-linear-gradient(top, white 0%, #f2f2f2 30%, #d5d4d3 100%);
  background-image: -o-linear-gradient(top, white 0%, #f2f2f2 30%, #d5d4d3 100%);
  background-image: linear-gradient(top, white 0%, #f2f2f2 30%, #d5d4d3 100%);
  box-shadow: 0 1px 3px #d7d7d7;
  color: #5f5f5f;
  text-decoration: none; }
  .RadGrid_Silk .rgCommandRow a {
    color: #5f5f5f;
    text-decoration: none; }
.RadGrid_Silk .rgCommandCell {
  border: 0;
  border-bottom: 1px solid #d9d9d9;
  padding: 0; }
.RadGrid_Silk tfoot .rgCommandCell,
.RadGrid_Silk .rgMasterTable > tbody > tr.rgCommandRow .rgCommandCell {
  border-top: 1px solid #d9d9d9;
  border-bottom: 0; }
.RadGrid_Silk .rgCommandTable {
  border: 0; }
  .RadGrid_Silk .rgCommandTable td {
    border: 0;
    padding: 7px; }
.RadGrid_Silk .rgAdd,
.RadGrid_Silk .rgSave,
.RadGrid_Silk .rgCommandRow .rgCancel {
  margin-right: 3px;
  width: 20px;
  height: 20px;
  vertical-align: top; }
.RadGrid_Silk .rgAdd {
  background-position: -15px -3015px; }
  .RadGrid_Silk .rgAdd:hover, .RadGrid_Silk .rgAdd:active {
    background-position: -65px -3015px; }
.RadGrid_Silk .rgCommandRow .rgCancel {
  background-position: -15px -2815px; }
  .RadGrid_Silk .rgCommandRow .rgCancel:hover, .RadGrid_Silk .rgCommandRow .rgCancel:active {
    background-position: -65px -2815px; }
.RadGrid_Silk .rgSave {
  background-position: icon-save(20, 20, 1); }
  .RadGrid_Silk .rgSave:hover, .RadGrid_Silk .rgSave:active {
    background-position: icon-save(20, 20, 2); }
.RadGrid_Silk .rgRefresh {
  margin-right: 3px;
  width: 20px;
  height: 20px;
  vertical-align: top;
  background-position: -15px -1315px; }
  .RadGrid_Silk .rgRefresh:hover {
    background-position: -65px -1315px; }
.RadGrid_Silk .rgEdit {
  margin-right: 3px;
  background-position: -17px -3117px; }
  .RadGrid_Silk .rgEdit:hover {
    background-position: -67px -3117px; }
.RadGrid_Silk .rgDel {
  margin-right: 3px;
  background-position: -17px -3367px; }
  .RadGrid_Silk .rgDel:hover {
    background-position: -67px -3367px; }
.RadGrid_Silk .rgExpXLS,
.RadGrid_Silk .rgExpDOC,
.RadGrid_Silk .rgExpPDF,
.RadGrid_Silk .rgExpCSV {
  background-image: url('../Common/Grid/export.gif'); }
.RadGrid_Silk .rgExpXLS {
  background-position: 0 0; }
.RadGrid_Silk .rgExpDOC {
  background-position: 0 -50px; }
.RadGrid_Silk .rgExpPDF {
  background-position: 0 -100px; }
.RadGrid_Silk .rgExpCSV {
  background-position: 0 -150px; }

.rgCellSelectorArea_Silk,
.GridRowSelector_Silk {
  background: #4c4e54; }

.GridItemDropIndicator_Silk {
  border-top: 1px dashed #666; }

.GridReorderTop_Silk,
.GridReorderBottom_Silk {
  background-image: url('Common/radActionsSprite.png');
  background-repeat: no-repeat;
  background-position: -20px -70px; }

.GridReorderBottom_Silk {
  background-position: -20px -20px; }

.GridToolTip_Silk {
  border: 1px solid #c98400;
  padding: 3px;
  background: #ffefbd;
  color: #333; }

.RadGridRTL_Silk .rgHeader:first-child, .RadGridRTL_Silk th.rgResizeCol:first-child,
.RadGridRTL_Silk .rgFilterRow > td:first-child,
.RadGridRTL_Silk .rgRow > td:first-child,
.RadGridRTL_Silk .rgAltRow > td:first-child {
  padding-left: 7px; }
.RadGridRTL_Silk .rgExpand {
  background-position: -15px -118px; }
.RadGridRTL_Silk .rgPageFirst {
  background-position: 0 -300px; }
  .RadGridRTL_Silk .rgPageFirst:hover {
    background-position: 0 -500px; }
  .RadGridRTL_Silk .rgPageFirst:active {
    background-position: 0 -700px; }
.RadGridRTL_Silk .rgPagePrev {
  background-position: 0 -250px; }
  .RadGridRTL_Silk .rgPagePrev:hover {
    background-position: 0 -450px; }
  .RadGridRTL_Silk .rgPagePrev:active {
    background-position: 0 -650px; }
.RadGridRTL_Silk .rgPageNext {
  background-position: 0 -200px; }
  .RadGridRTL_Silk .rgPageNext:hover {
    background-position: 0 -400px; }
  .RadGridRTL_Silk .rgPageNext:active {
    background-position: 0 -600px; }
.RadGridRTL_Silk .rgPageLast {
  background-position: 0 -150px; }
  .RadGridRTL_Silk .rgPageLast:hover {
    background-position: 0 -350px; }
  .RadGridRTL_Silk .rgPageLast:active {
    background-position: 0 -550px; }

.RadGrid_Silk .rgRow td,
.RadGrid_Silk .rgAltRow td,
.RadGrid_Silk .rgEditRow td,
.RadGrid_Silk .rgFooter td
{
    padding-top: 0;
    padding-bottom: 0;
    border-style: solid;
    border-width: 0 0 1px 0;
    line-height: 15px;
    height: 15px ;
    font-size: 12px;
}

[Alex]

.RadSlider_Silk div.rslHorizontal div.rslTrack {
  height: 8px;
  line-height: 8px;
  background-color: #d7d7d7; }

I have the glitch appearing now and these lines (present in stock Telerik CSS) causing the slider to have the incorrect colouring and stretch downwards beyond the boundaries of the RadGrid. Disabling the background-color part prevents it from looking blocky, although there is still a disproportionate space between the end of the slider bar and the "increase" arrow.

I have now reverted back to  the original Slider.Silk.css code and Grid.Silk.css code but have reproduced the glitch again.

[Alex]

Switched to using only the stock Telerik CSS classes and still get the glitchy slider and here is no other CSS classes to affect the controls.

I have a stripped down project where I have recreated the error.

Can attach it to this post so you can download it here: 
http://www.megafileupload.com/en/file/507510/Glitch-zip.html

[Venelin]

Hi Alex,

I'm still not able to reproduce the issue locally, but I currently find 3 possible reasons for it.

1. Somewhere in the CSS the slider's default styles might be overridden. Please refer to the short video I captured for reference and inspect the element shown on it.

2. Make sure that there are no JS errors listed in browser's console. If any, resolve them.

3. Please refer to this article: Broken skin when loading the RadSlider via AJAX

Regards,
Venelin
Telerik