CODEWITHSUNDEEP
jquerytwitter-bootstrapslider
Jesse Alex
Jesse Alex

Reputation: 111

Jquery Slider - 'undefined' error

So i got this simple script from bootsnip.

All I wanted was a simple slider so I used this above script although stripped it down a bit, but im getting an undefined error. Could someone please help me with this.

Here is what I got. 

$(document).ready(function() {
          $("#slider").slider({
              animate: true,
              value:1,
              min: 1,
              max: 10,
              step: 1,
              slide: function(event, ui) {
                  update(1,ui.value); //changed
              }
          });

          //Added, set initial value.
          $("#amount").val(0);
          $("#amount-label").text(0);
          
          update();
      });

      //changed. now with parameter
      function update(slider,val) {
        //changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
        var $amount = slider == 1?val:$("#amount").val();

        /* commented
        $amount = $( "#slider" ).slider( "value" );
        $duration = $( "#slider2" ).slider( "value" );
         */

         $('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
      }
.ui-widget-content {
    border: 1px solid #bdc3c7;
    background: #e1e1e1;
    color: #222222;
    margin-top: 4px;
}

.ui-state-default, .ui-widget-content .ui-state-default{
background:transparent !important;
border:none !important;
}
.ui-slider .ui-slider-handle label{
    background: #E68937;
    border-radius: 5px;
    width:5.2em;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 5.2em;
    height: 100px;
    cursor: default;
    margin: 0 -40px auto !important;
    text-align: center; 
    line-height: 35px;
    color: #FFFFFF;
    font-size: 15px;
    
}

.ui-slider .ui-slider-handle .glyphicon {
    color: #FFFFFF;
    margin: 0 3px; 
    font-size: 11px;
    opacity: 0.5;
}

.ui-corner-all {
    border-radius: 20px;
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.9em;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    border: 1px solid #f9f9f9;
    background: #3498db;
}

.ui-slider-horizontal .ui-slider-handle {
    margin-left: -0.5em;
}

.ui-slider .ui-slider-handle {
    cursor: pointer;
}

.ui-slider a,
.ui-slider a:focus {
    cursor: pointer;
    outline: none;
}
.skill-slider {
    margin-bottom: 70px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

<div class="skill-slider">
  <div class="col-md-10 col-md-offset-1">
  <div id="slider"></div>
  </div>
</div>

Upvotes: 2

Views: 480

Answers (2)

Johnson
Johnson

Reputation: 406

If you are using the #amount div to display the value then you must set it to the min value i.e. 1 (not 0) you have supplied to the slider like so:

replace 

     $("#amount").val(0);

with

     $("#amount").val(1);

The slider won't allow the value to go beyond the min, max range, but it seems you're initializing it beyond the range.

What's happening in this nice piece of code? 

    var $amount = slider == 1?val:$("#amount").val();

Its checking if a parameter (slider) has been passed to the function, if not, then it initializes the slider value to the value present in #amount. In the update() call, there is no slider value which is passed, so it tries to read the value in #amount. But the #amount object is not created in the html. Which is where your 'UndefinedError' is coming from.

Also, If you won't be using the #amount div, then in the document.ready() function, you can use update(1,1) instead of a blank update() to set the value of the slider without reading from the #amount object's value;

This should set up the slider's initial value explicitly:

replace

    update();

with

    update(1,1);

and replace 

    var $amount = slider == 1?val:$("#amount").val();

with

    var $amount = val;

Ideally, you don't want to overload an update() function with init logic. So this keeps it clean.

Upvotes: 1

Foon
Foon

Reputation: 6458

You're doing var $amount = slider == 1?val:$("#amount").val(); but no where in your HTML do I see an item with an attribute id=amount. There could be other issues, but that's the first problem. (In case you're not familar with jquery, $("#amount") means get the HTML element with the ID of amount; if there isn't one, this will return undefined, which doesn't have a "val" method. (Also, I don't like using $varname for variables that aren't jquery objects, but that's a personal preference AFAIK)

Upvotes: 1

Related Questions