Slider Skinning Sample

2 posts, 0 answers
  1. Rene
    Rene avatar
    65 posts
    Member since:
    Nov 2010

    Posted 27 Feb 2015 Link to this post

    Just a sample to skin a slider via css, thought I'd share:
    (vendor prefixes omitted for clarity)


    .k-slider-track {
        background: linear-gradient(to bottom, rgba(199, 199, 199, 0.7) 5%, rgba(156, 156, 156, 0.1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        border-color: #292929;
        border-radius: 2px;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) inset;
    }

    .k-slider-selection {
        background: linear-gradient(to bottom, rgba(199, 244, 199, 0.7) 5%, rgba(156, 224, 156, 0.1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
        border-color: #293329;
        border-radius: 2px;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) inset;
    }

    .k-draghandle {
      background: linear-gradient(to bottom, rgba(199, 244, 199, 0.7) 5%, rgba(156, 224, 156, 0.1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
      border-color: #294429;
      border-radius: 2px;  
    }

    .k-tick-large {
      display:none;  
    }
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 03 Mar 2015 Link to this post

    Hi Rene,

    Thank you for sharing your solution with the community.

    Regards,
    Iliana Nikolova
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top