<!-- header -->
<header>
<h2>Material Design Sliders</h2>
</header><!-- @end header -->
<!-- Main content -->
<main role="main" data-slider-color="slider-lightBlue">
<section>
<h3 class="heading">Light</h3>
<div class="wrap">
<div class="title">Continuous slider</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-continuous slider-lightBlue">
<input type="range" min="0" max="100" value="0">
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Normal</div>
</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-continuous slider-scale slider-lightBlue">
<input type="range" min="0" max="100" value="25">
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Scale Effect</div>
</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-continuous slider-shadow slider-lightBlue">
<input type="range" min="0" max="100" value="50">
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Shadow Effect</div>
</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-continuous slider-shadow slider-lightBlue">
<input type="range" min="0" max="100" value="65" disabled>
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Disabled</div>
</div>
</div>
<div class="wrap">
<div class="title">Discrete slider</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-discrete slider-lightBlue">
<input type="range" min="0" max="100" value="35">
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Normal</div>
</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-discrete slider-lightBlue">
<input type="range" min="0" max="100" value="65" disabled>
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Disabled</div>
</div>
</div>
</section>
<section class="bg-dark">
<h3 class="heading">Dark</h3>
<div class="wrap">
<div class="title">Continuous slider</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-continuous slider-lightBlue slider-light">
<input type="range" min="0" max="100" value="0">
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Normal</div>
</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-continuous slider-scale slider-lightBlue slider-light">
<input type="range" min="0" max="100" value="25">
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Scale Effect</div>
</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-continuous slider-shadow slider-lightBlue slider-light">
<input type="range" min="0" max="100" value="50">
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Shadow Effect</div>
</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-continuous slider-shadow slider-lightBlue slider-light">
<input type="range" min="0" max="100" value="65" disabled>
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Disabled</div>
</div>
</div>
<div class="wrap">
<div class="title">Discrete slider</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-discrete slider-lightBlue slider-light">
<input type="range" min="0" max="100" value="35">
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Normal</div>
</div>
<div class="holder">
<div class="demo">
<!-- rkmd-slider -->
<div class="rkmd-slider slider-discrete slider-lightBlue slider-light">
<input type="range" min="0" max="100" value="65" disabled>
</div><!-- @end rkmd-slider -->
</div>
<div class="captions">Disabled</div>
</div>
</div>
</section>
</main><!-- @end main -->
<!-- Footer -->
<footer>
<div class="row">
<div class="footer-content">
<span><strong>Made in India</strong>,</span>
<span>by <a href="https://twitter.com/rkchauhan01" target="_blank">Ravikumar Chauhan</a>.</span>
<span><a href="https://github.com/rkchauhan" target="_blank">GitHub</a></span>
<span><a href="https://codepen.io/rkchauhan" target="_blank">CodePen</a></span>
<span><a href="http://uplabs.com/rkchauhan01" target="_blank">UpLabs</a></span>
</div>
</div>
</footer><!-- @end footer -->
<!-- color-box -->
<div class="color-box">
<a class="show-box"><i title="Select color" class="material-icons">invert_colors</i></a>
<p>Colors:</p>
<ul class="colors-list">
<li><a title="Teal" class="teal" data-slider-color="teal" onclick="return false;"></a></li>
<li><a title="Light Blue" class="lightBlue" data-slider-color="lightBlue" onclick="return false;"></a></li>
<li><a title="Green" class="green" data-slider-color="green" onclick="return false;"></a></li>
<li><a title="Amber" class="amber" data-slider-color="amber" onclick="return false;"></a></li>
<li><a title="Orange" class="orange" data-slider-color="orange" onclick="return false;"></a></li>
<li><a title="Cyan" class="cyan" data-slider-color="cyan" onclick="return false;"></a></li>
<li><a title="Pink" class="pink" data-slider-color="pink" onclick="return false;"></a></li>
<li><a title="Deep Purple" class="deepPurple" data-slider-color="deepPurple" onclick="return false;"></a></li>
<li><a title="Indigo" class="indigo" data-slider-color="indigo" onclick="return false;"></a></li>
<li><a title="Red" class="red" data-slider-color="red" onclick="return false;"></a></li>
<li><a title="Yellow" class="yellow" data-slider-color="yellow" onclick="return false;"></a></li>
<li><a title="Lime" class="lime" data-slider-color="lime" onclick="return false;"></a></li>
<li><a title="Brown" class="brown" data-slider-color="brown" onclick="return false;"></a></li>
</ul>
</div><!-- @end color-box -->
/* -----------------------------------------------------
Material Design Sliders
CodePen URL: https://codepen.io/rkchauhan/pen/xVGGpR
By: Ravikumar Chauhan
Find me on:-
* Twitter: https://twitter.com/rkchauhan01
* Facebook: https://www.facebook.com/ravi032chauhan
* GitHub: https://github.com/rkchauhan
* CodePen: https://codepen.io/rkchauhan
* UpLabs: http://uplabs.com/rkchauhan01
Thanks to:-
* Google Material design - https://www.google.com/design/spec/material-design/introduction.html
* Google Material Color - https://www.google.com/design/spec/style/color.html
* Google Material Icons - https://design.google.com/icons/
* Roboto Font - https://google.com/fonts/specimen/Roboto
* jQuery - https://jquery.com
-------------------------------------------------------- */
// For Variables
// Colors
$white: #fff;
$black: #000;
$grey: #eee;
$lightBlue: #03a9f4;
$orange: #ff9800;
$amber: #ffc107;
$green: #4caf50;
$teal: #009688;
$cyan: #00bcd4;
$indigo: #3f51b5;
$deepPurple: #673ab7;
$pink: #e91e63;
$red: #f44336;
$yellow: #ffeb3b;
$lime: #cddc39;
$brown: #795548;
// Body
$body_bg_color: #fafafa;
$link_color: $lightBlue;
/* -----------------------------------------------------
Body
-------------------------------------------------------- */
body {
margin: 0;
padding: 0;
color: #646360;
font-size: 16px;
font-family: 'Roboto', sans-serif;
background-color: $body_bg_color;
}
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
a {
color: $link_color;
outline: none;
text-decoration: none;
&:hover { text-decoration: underline; }
}
/* -----------------------------------------------------
Color Box
-------------------------------------------------------- */
.color-box {
position: fixed;
top: 22%;
right: 0px;
width: 100px;
padding: 20px 18px 14px 20px;
background-color: #fff;
border-radius: 2px 0 0 2px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.175);
transition: all .4s ease-in-out;
transform: translate3d(102px,0,0);
z-index: 2;
&.open { transform: translate3d(0,0,0) !important; }
.show-box {
position: absolute;
left: -38px;
top: 15px;
width: 38px;
height: 38px;
display: block;
background-color: #fff;
border-radius: 2px 0 0 2px;
box-shadow: -4px 2px 2px -2px rgba(0,0,0,0.175);
cursor: pointer;
z-index: 1;
i {
color: rgba(0,0,0,0.575);
font-size: 20px;
line-height: 38px;
margin-left: 8px;
}
}
p {
margin: 0 0 8px 0;
padding: 0;
font-size: 11px;
}
.colors-list {
margin: 0;
padding: 0;
li {
float: left;
display: block;
margin-bottom: 2px;
margin-right: 6px;
a {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 2px;
transition: all 0.2s linear;
cursor: pointer;
&.teal {background-color: $teal; }
&.lightBlue {background-color: $lightBlue; }
&.green {background-color: $green; }
&.amber {background-color: $amber; }
&.orange {background-color: $orange; }
&.cyan {background-color: $cyan; }
&.pink {background-color: $pink; }
&.deepPurple {background-color: $deepPurple; }
&.indigo {background-color: $indigo; }
&.red {background-color: $red; }
&.yellow {background-color: $yellow; }
&.lime {background-color: $lime; }
&.brown {background-color: $brown; }
}
}
}
}
/* -----------------------------------------------------
Header
-------------------------------------------------------- */
header {
display: block;
width: 100%;
padding: 12px 0;
text-align: center;
background-color: $indigo;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.275);
h2 {
margin: 0;
padding: 25px 0;
color: #FFF;
font-size: 2em;
font-weight: 300;
letter-spacing: 1px;
}
}
/* -----------------------------------------------------
Footer
-------------------------------------------------------- */
footer {
display: block;
overflow: hidden;
width: 100%;
min-height: 80px;
background-color: #dbdbdb;
border-top: 1px solid #EEE;
.row {
width: 100%;
max-width: 860px;
margin: 0 auto;
}
.footer-content {
margin: 0 8px;
padding: 25px 0 18px;
text-align: center;
span {
color: rgba(0, 0, 0, 0.525);
font-size: 0.857em;
margin-right: 5px;
}
}
@media only screen and (max-width: 768px) {
span {
display: block;
width: 100%;
margin-bottom: 8px;
}
}
}
/* -----------------------------------------------------
Main
-------------------------------------------------------- */
main {
width: 100%;
max-width: 940px;
margin: 2rem auto;
section {
display: block;
margin-bottom: 2rem;
padding: 1rem;
background-color: $grey;
box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.157);
&:last-child { margin-bottom: 0; }
.heading {
margin: 0;
padding: 0 0 8px 0;
font-size: 1.2rem;
}
.wrap {
display: block;
margin-bottom: 3em;
&:last-child { margin-bottom: 0; }
.title {
display: block;
padding: 8px 0;
font-size: 1.3em;
text-align: center;
border-top: 1px solid rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.holder {
display: flex;
position: relative;
margin-bottom: .5rem 0;
padding: 1.5% 0 2%;
border-bottom: 1px solid rgba(0,0,0,0.2);
&:last-child { margin-bottom: 0; border-bottom: none; }
.demo {
display: block;
width: 68%;
min-height: 60px;
margin: 0 auto;
padding: 28px 0;
order: 2;
}
.captions {
display: block;
width: 25%;
min-height: 60px;
margin-right: 1%;
line-height: 60px;
font-size: 14px;
text-align: center;
order: 1;
}
}
@media only screen and (max-width: 640px) {
.holder {
display: block;
width: 100%;
.demo {
width: 100%;
}
.captions {
display: block;
width: 100%;
min-height: auto;
margin-right: 0;
line-height: normal;
}
}
}
}
&.bg-dark {
background-color: #333;
box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.257);
.title {
border-top: 1px solid rgba(255,255,255,0.2);
border-bottom: 1px solid rgba(255,255,255,0.2);
}
.heading { color: #7a7a7a; }
.holder { border-bottom: 1px solid rgba(255,255,255,0.2); }
}
&.bg-light {
background-color: #fff;
}
}
@media only screen and (max-width: 960px) {
padding: 0 1.5%;
}
}
/* ----------------------------------------------------------------------
Material Design Range Slider - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-slider {
display: block;
position: relative;
font-size: 16px;
font-family: 'Roboto', sans-serif;
input[type="range"] {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
& + .slider {
display: block;
position: relative;
width: 100%;
height: 4px;
background-color: #bebebe;
.slider-fill {
display: block;
position: absolute;
width: 0%;
height: 100%;
user-select: none;
z-index: 1;
}
.slider-handle {
cursor: pointer;
position: absolute;
top: -5.5px;
left: 0%;
width: 15px;
height: 15px;
margin-left: -8px;
border-radius: 50%;
transition: all .2s ease;
user-select: none;
z-index: 2;
}
}
&:disabled + .slider {
background-color: #b0b0b0 !important;
.slider-fill,
.slider-handle {
cursor: default !important;
background-color: #b0b0b0 !important;
.slider-label { display: none; background-color: #b0b0b0 !important; }
&.is-active {
top: -5.5px;
width: 15px;
height: 15px;
margin-left: -8px;
.slider-label {
display: none;
border-radius: 50%;
transform: none;
}
}
}
.slider-handle:active {
box-shadow: none !important;
transform: scale(1) !important;
}
}
}
&.slider-light {
input[type="range"] {
& + .slider { background-color: #5c5c5c; }
&:disabled + .slider {
background-color: #5c5c5c !important;
.slider-fill,
.slider-handle { background-color: #5c5c5c !important; }
}
}
}
}
/* ----------------------------------------------------------------------
Continuous Range Slider - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-slider {
&.slider-continuous {
&.slider-scale {
.slider-handle:active { transform: scale(1.4); }
}
&.slider-shadow {
&.slider-lightBlue {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($lightBlue,.26); }
}
&.slider-teal {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($teal,.26); }
}
&.slider-orange {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($orange,.26); }
}
&.slider-amber {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($amber,.26); }
}
&.slider-green {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($green,.26); }
}
&.slider-cyan {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($cyan,.26); }
}
&.slider-indigo {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($indigo,.26); }
}
&.slider-deepPurple {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($deepPurple,.26); }
}
&.slider-pink {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($pink,.26); }
}
&.slider-red {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($red,.26); }
}
&.slider-yellow {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($yellow,.26); }
}
&.slider-lime {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($lime,.26); }
}
&.slider-brown {
.slider-handle:active { box-shadow: 0 0 0 10px rgba($brown,.26); }
}
}
}
}
/* ----------------------------------------------------------------------
Discrete Range Slider - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-slider {
&.slider-discrete {
.slider {
.slider-handle {
position: relative;
z-index: 1;
.slider-label {
position: absolute;
top: -17.5px;
left: -2px;
width: 30px;
height: 30px;
transform-origin: 50% 100%;
border-radius: 50%;
transform: scale(.5) rotate(-45deg);
transition: all .2s ease;
span {
position: absolute;
top: 7px;
left: 0px;
width: 100%;
color: #fff;
font-size: 12px;
text-align: center;
transform: rotate(45deg);
opacity: 0;
user-select: none;
}
}
&.is-active {
top: 0px;
margin-left: -2px;
width: 4px;
height: 4px;
.slider-label {
top: -15px;
left: -2px;
border-radius: 15px 15px 15px 0;
transform: rotate(-45deg) translate(23px, -25px);
span {
opacity: 1;
}
}
}
}
}
&.slider-lightBlue {
.slider-label { background-color: $lightBlue; }
}
&.slider-teal {
.slider-label { background-color: $teal; }
}
&.slider-orange {
.slider-label { background-color: $orange; }
}
&.slider-amber {
.slider-label { background-color: $amber; }
}
&.slider-green {
.slider-label { background-color: $green; }
}
&.slider-cyan {
.slider-label { background-color: $cyan; }
}
&.slider-indigo {
.slider-label { background-color: $indigo; }
}
&.slider-deepPurple {
.slider-label { background-color: $deepPurple; }
}
&.slider-pink {
.slider-label { background-color: $pink; }
}
&.slider-red {
.slider-label { background-color: $red; }
}
&.slider-yellow {
.slider-label { background-color: $yellow; }
}
&.slider-lime {
.slider-label { background-color: $lime; }
}
&.slider-brown {
.slider-label { background-color: $brown; }
}
}
}
/* ----------------------------------------------------------------------
Range Slider Color - by Ravikumar Chauhan
------------------------------------------------------------------------- */
.rkmd-slider {
&.slider-lightBlue {
.slider-fill,
.slider-handle {
background-color: $lightBlue;
}
}
&.slider-teal {
.slider-fill,
.slider-handle {
background-color: $teal;
}
}
&.slider-orange {
.slider-fill,
.slider-handle {
background-color: $orange;
}
}
&.slider-amber {
.slider-fill,
.slider-handle {
background-color: $amber;
}
}
&.slider-green {
.slider-fill,
.slider-handle {
background-color: $green;
}
}
&.slider-cyan {
.slider-fill,
.slider-handle {
background-color: $cyan;
}
}
&.slider-indigo {
.slider-fill,
.slider-handle {
background-color: $indigo;
}
}
&.slider-deepPurple {
.slider-fill,
.slider-handle {
background-color: $deepPurple;
}
}
&.slider-pink {
.slider-fill,
.slider-handle {
background-color: $pink;
}
}
&.slider-red {
.slider-fill,
.slider-handle {
background-color: $red;
}
}
&.slider-yellow {
.slider-fill,
.slider-handle {
background-color: $yellow;
}
}
&.slider-lime {
.slider-fill,
.slider-handle {
background-color: $lime;
}
}
&.slider-brown {
.slider-fill,
.slider-handle {
background-color: $brown;
}
}
}
/* -----------------------------------------------------
Material Design Sliders
CodePen URL: https://codepen.io/rkchauhan/pen/xVGGpR
By: Ravikumar Chauhan
Find me on:-
* Twitter: https://twitter.com/rkchauhan01
* Facebook: https://www.facebook.com/ravi032chauhan
* GitHub: https://github.com/rkchauhan
* CodePen: https://codepen.io/rkchauhan
* UpLabs: http://uplabs.com/rkchauhan01
Thanks to:-
* Google Material design - https://www.google.com/design/spec/material-design/introduction.html
* Google Material Color - https://www.google.com/design/spec/style/color.html
* Google Material Icons - https://design.google.com/icons/
* Roboto Font - https://google.com/fonts/specimen/Roboto
* jQuery - https://jquery.com
-------------------------------------------------------- */
$(document).ready(function() {
$('.rkmd-slider').rkmd_rangeSlider();
change_slider_color();
});
/* Range Slider Function */
(function($) {
$.fn.rkmd_rangeSlider = function() {
var self, slider_width, slider_offset, curnt, sliderContinuous, sliderDiscrete, range, slider;
self = $(this);
slider_width = self.outerWidth();
slider_offset = self.offset().left;
sliderContinuous = $('.slider-continuous');
sliderDiscrete = $('.slider-discrete');
if(self.hasClass('slider-continuous') === true) {
sliderContinuous.each(function(i, v) {
curnt = $(this);
curnt.append(sliderContinuous_tmplt());
range = curnt.find('input[type="range"]');
slider = curnt.find('.slider');
slider_fill = slider.find('.slider-fill');
slider_handle = slider.find('.slider-handle');
var range_val = range.val();
slider_fill.css('width', range_val +'%');
slider_handle.css('left', range_val +'%');
});
}
if(self.hasClass('slider-discrete') === true) {
sliderDiscrete.each(function(i, v) {
curnt = $(this);
curnt.append(sliderDiscrete_tmplt());
range = curnt.find('input[type="range"]');
slider = curnt.find('.slider');
slider_fill = slider.find('.slider-fill');
slider_handle = slider.find('.slider-handle');
slider_label = slider.find('.slider-label');
var range_val = parseInt(range.val());
slider_fill.css('width', range_val +'%');
slider_handle.css('left', range_val +'%');
slider_label.find('span').text(range_val);
});
}
self.on('mousedown', '.slider-handle', function(e) {
if(e.button === 2) {
return false;
}
var parents = $(this).parents('.rkmd-slider');
var slider_width = parents.outerWidth();
var slider_offset = parents.offset().left;
var check_range = parents.find('input[type="range"]').is(':disabled');
if(check_range === true) {
return false;
}
if(parents.hasClass('slider-discrete') === true) {
$(this).addClass('is-active');
}
var handlers = {
mousemove: function(e) {
var slider_new_width = e.pageX - slider_offset;
if(slider_new_width <= slider_width && !(slider_new_width < '0')) {
slider_move(parents, slider_new_width, slider_width);
}
},
mouseup: function(e) {
$(this).off(handlers);
if(parents.hasClass('slider-discrete') === true) {
parents.find('.is-active').removeClass('is-active');
}
}
};
$(document).on(handlers);
});
self.on('mousedown', '.slider', function(e) {
if(e.button === 2) {
return false;
}
var parents = $(this).parents('.rkmd-slider');
var slider_width = parents.outerWidth();
var slider_offset = parents.offset().left;
var check_range = parents.find('input[type="range"]').is(':disabled');
if(check_range === true) {
return false;
}
var slider_new_width = e.pageX - slider_offset;
if(slider_new_width <= slider_width && !(slider_new_width < '0')) {
slider_move(parents, slider_new_width, slider_width);
}
var handlers = {
mouseup: function(e) {
$(this).off(handlers);
}
};
$(document).on(handlers);
});
};
function sliderContinuous_tmplt() {
var tmplt = '<div class="slider">' +
'<div class="slider-fill"></div>' +
'<div class="slider-handle"></div>' +
'</div>';
return tmplt;
}
function sliderDiscrete_tmplt() {
var tmplt = '<div class="slider">' +
'<div class="slider-fill"></div>' +
'<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>' +
'</div>';
return tmplt;
}
function slider_move(parents, newW, sliderW) {
var slider_new_val = parseInt(Math.round(newW / sliderW * 100));
var slider_fill = parents.find('.slider-fill');
var slider_handle = parents.find('.slider-handle');
var range = parents.find('input[type="range"]');
slider_fill.css('width', slider_new_val +'%');
slider_handle.css({
'left': slider_new_val +'%',
'transition': 'none',
'-webkit-transition': 'none',
'-moz-transition': 'none'
});
range.val(slider_new_val);
if(parents.hasClass('slider-discrete') === true) {
parents.find('.slider-handle span').text(slider_new_val);
}
}
}(jQuery));
/* Change Slider Color */
function change_slider_color() {
$('.color-box .show-box').on('click', function() {
$(".color-box").toggleClass("open");
});
$('.colors-list a').on('click', function() {
var curr_color = $('main').data('slider-color');
var color = $(this).data('slider-color');
var new_colot = 'slider-' + color;
$('.rkmd-slider').each(function(i, v) {
var findColor = $(this).hasClass(curr_color);
if(findColor) {
$(this).removeClass(curr_color);
$(this).addClass(new_colot);
}
$('main').data('slider-color', new_colot);
});
});
}
Also see: Tab Triggers