This is a migrated thread and some comments may be shown as answers.
Slider Skinning Sample
1 Answer 13 Views
This is a migrated thread and some comments may be shown as answers.
Rene
Top achievements
Rank 1
Rene asked on 27 Feb 2015, 11:03 PM
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;  
}

1 Answer, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 03 Mar 2015, 12:05 PM
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.

 
Asked by
Rene
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Share this question
or