CODEWITHSUNDEEP
jquery
maryam_mo
maryam_mo

Reputation: 61

How to change background color on highlight effect?

I hava a jquery mobile slider.

<input name="slider-1" id="slider-1" data-highlight="true"min="0" 
                                            max="100" value="50" type="range">

I want to change the color of the highlight fill on the track of the slider? (By default its blue ). this is my code but its not work

$("#slider-1").effect("highlight", { color: "#ff00ff" }, 3000);

Thanks

Upvotes: 2

Views: 1581

Answers (4)

S. S. Rawat
S. S. Rawat

Reputation: 6111

Use the .css property for it and want to change background with animation use the animate function.

 $("#slider-3").css("background-color","#ff00ff");

jQuery .css Documentation

Upvotes: 0

Ved
Ved

Reputation: 2701

Add your color code in this css class and dont change class name.

.ui-btn-active {
   background: linear-gradient(#5393C5, #6FACD5) repeat scroll 0 0 #5393C5;
   border: 1px solid #2373A5;
   color: #FFFFFF;
   cursor: pointer;
   font-family: Helvetica,Arial,sans-serif;
   font-weight: bold;
   text-decoration: none;
   text-shadow: 0 1px 1px #3373A5;
 }

Upvotes: 1

Praveen
Praveen

Reputation: 56509

You're using the wrong selector to change the default color of the slider.

div.ui-btn-active this is right one

div.ui-btn-active{
    background: #ff00ff;
}

Using jQuery,

$("div.ui-btn-active").css("background","#ff00ff");

enter image description here

Check this fiddle

Upvotes: 3

Mohsen Safari
Mohsen Safari

Reputation: 6795

I think the CSS solution is better:

#slider-3::selection
{
    color:#ffffff;
    background-color:#ff0000;
}

#slider-3::-moz-selection   /* firefox*/
{
    color:#ffffff;
    background-color:#ff0000;
}

Upvotes: 1

Related Questions