CODEWITHSUNDEEP
jquery-uiattributessliderthis
Maëlle
Maëlle

Reputation: 653

JQuery UI slider : set min and max with attributes

I need to work with several sliders in the same page. Therefore I've created a class for the sliders (so there's only one jquery code) and I want to set the max and min values to attributes of the divs. They will then change according to the slider selected.

I'm guessing to do that I would need to use this at some point, or else it will target every class. Although I have no idea where to start or where to include it.

For now I've just applied the basic code, here it is:

HTML :

<div class="slider" slider-min="15" slider-max="250" svalue="132"></div><span class="slider-value"></span>
<div class="slider" slider-min="30" slider-max="300" svalue="165"></div><span class="slider-value"></span>
<div class="slider" slider-min="100" slider-max="500" svalue="300"></div><span class="slider-value"></span>

CSS :

.ui-slider { position: relative; text-align: left; background: #DADDD8; z-index: 0; }
.ui-slider { -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; box-shadow: 0 1px 2px rgba(0,0,0,0.5) inset; }
.ui-slider .ui-slider-handle { background: #8FB339; position: absolute; z-index: 2; width: 15px; height: 15px; border-radius:5px; cursor:pointer; }
.ui-slider  .ui-state-hover, .ui-slider  .ui-state-active { background: #4B5842; }
.ui-slider .ui-slider-range { background: #C7D59F; position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
.ui-slider .ui-slider-range { -moz-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; -webkit-box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; box-shadow: 0 1px 2px rgba(17,35,45,0.6) inset; }


.ui-slider-horizontal { height: 5px; width:100px; margin:5px auto; }
.ui-slider-horizontal .ui-slider-handle { top: -5px; margin-left: -5px; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.slider-value{
  font-size:12px;
  float:right;
  margin-top:-16px;
  margin-right:5px;
}

JS/JQUERY :

  $( function() {
    var div = $(".slider");
    $( ".slider" ).slider({
      range: "min",
      slide: function( event, ui ) {
                $( ".slider-value" ).html( ui.value );
            },
      min: div.data("slider-min"),
      max: div.data("slider-max"),
      value: div.data("svalue"),
})});

$( ".slider-value" ).html(  $(this).slider('value') );

Here is this demo on jsfiddle

AND while I'm at it, I've got this other problem with the class/multiple sliders thing : when I want to display the current value of ONE slider, since it's a class it changes all the .slider-value spans. I do not know where to begin with this issue either.

Thank you for your time/help :)

Upvotes: 2

Views: 3108

Answers (1)

Richard Dunn
Richard Dunn

Reputation: 6780

Okay, you were on the right path, but you were throwing a few things in there that were redundant, probably from trying stuff and forgetting to remove them.

I've modified your code a little to make the function you have reusable. I've also nested the value field within the same div as the slider. This is to show you how easy jQuery makes it to find related elements, but you could relate them in other ways without having to nest them... Note that I didn't fix up the CSS, so it's a little messed up, but you can figure that out yourself...

The big change really though was the use of the id attribute, when using jQuery selectors, the 3 main types you can use (though there are others), are CSS class selectors $(".slider"), element selectors $("div"), and id selectors $("#slider1").

Just try the following changes to the HTML and JavaScript:

JavaScript / jQuery:

var func = function(div) {
    var slide = $(div).slider({
      range: "min",
      slide: function( event, ui ) {
                $(div).find(".slider-value").html( ui.value );
            },
      min: parseInt(div.attr("slider-min")),
      max: parseInt(div.attr("slider-max")),
      value: parseInt(div.attr("svalue")),
    })
};

func($("#slider1"));
func($("#slider2"));
func($("#slider3"));

HTML:

<div class="slider" id="slider1" slider-min="15" slider-max="250" svalue="132"><span class="slider-value"></span>
</div>


<div class="slider" id="slider2" slider-min="30" slider-max="300" svalue="165"><span class="slider-value"></span></div>


<div class="slider" id="slider3" slider-min="100" slider-max="500" svalue="300"><span class="slider-value"></span></div>

Upvotes: 3

Related Questions