CODEWITHSUNDEEP
jqueryinputsliderrange
r1d3h4rd
r1d3h4rd

Reputation: 141

jQuery Slider - Multiple sliders with different handles

I am using several jQuery sliders as user inputs.

Each slider (1) is created by (2) and they work perfectly.

  1. div class="slider" id="a_unique_identifier_for_this_slider"> /div>

  2. $(document).ready(function() { $(".slider").slider();});

The issue I am having is that I would like for each unique slider to have a unique handle (image, shape or etc). This could be stylized in the jquery-ui.css, but it alters all my slider handles.

Is there any way that I can define several "handle styles" and then attribute them to the sliders I want?

Thanks, Clinton

Upvotes: 1

Views: 938

Answers (3)

Steve
Steve

Reputation: 847

Just add some CSS specific to your slider div

#a_unique_identifier_for_this_slider span.ui-slider-handle { background: red; }

Upvotes: 0

Valentin Brasso
Valentin Brasso

Reputation: 1387

Put this in your $(document).ready(function() {}) code block:

$(".slider").slider();
$('#a_unique_identifier_for_this_slider .ui-slider-handle').eq(0).addClass("ui-slider-handle-some-unique-class");

This adds a css class for one of the sliders. You can do this for every slider. The css is up to you.

Upvotes: 1

rlemon
rlemon

Reputation: 17667

You would have to remove the class that applies the handle styles and add your own custom class. 

var sliders = $(".slider");
sliders.slider();
sliders[0].removeClass("classNameSpecifyingTheHangle").addClass("YourNewClassName");

untested.. but this should be the general idea.

Upvotes: 0

Related Questions