vicky vicky - 2 months ago 24
HTML Question

jQuery bar-rating plugin color variants

I am using bar rating. I need color variant in rating.
light to dark color variant.
My code is as below

<script src='jquery.barrating.min.js'></script>

<div class="rating-a">
<select id="example">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>




<script>
$(function() {
$('#example').barrating();
});
</script>

Answer

Old question, but interesting.

You haven't specified which theme ("rating-a" doesn't appear to be a standard theme), so I've gone with .br-theme-bars-1to10 as it fits nicely with the requirement, but any theme should be fine.

Essentially, bar rating creates anchors for each bar with the value as data-rating-value, eg:

<a href="#" data-rating-value="4" data-rating-text="4"></a>

So we can use this to add additional css rules based on the attributes, using [attr=vaue] css selector, eg:

.br-theme-bars-1to10 .br-widget a.br-active[data-rating-value="1"],
.br-theme-bars-1to10 .br-widget a.br-selected[data-rating-value="1"] {
    background-color: #f6ede0;
}
.br-theme-bars-1to10 .br-widget a.br-active[data-rating-value="2"],
.br-theme-bars-1to10 .br-widget a.br-selected[data-rating-value="2"] {
    background-color: #f8e4c5;
}
.br-theme-bars-1to10 .br-widget a.br-active[data-rating-value="3"],
.br-theme-bars-1to10 .br-widget a.br-selected[data-rating-value="3"] {
    background-color: #f2cd95;
}
.br-theme-bars-1to10 .br-widget a.br-active[data-rating-value="4"],
.br-theme-bars-1to10 .br-widget a.br-selected[data-rating-value="4"] {
    background-color: #f3ba62;
}
.br-theme-bars-1to10 .br-widget a.br-active[data-rating-value="5"],
.br-theme-bars-1to10 .br-widget a.br-selected[data-rating-value="5"] {
    background-color: #f3980e;
}

Select different colours depending on your requirements of course.

Working fiddle: https://jsfiddle.net/mm65ody4/