CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Deepend
Deepend

Reputation: 4155

Adding a plus "+" symbol to positive numbers in a JQuery output

I have a modified Jquery UI Slider Bar (-100 to +100). When the user moves the slider up and down the scale they receive visual feedback via a <div id="slider-result"></div>

Currently the slider-result displays the - symbol when the number is negative e.g. -47, but it does not display the + symbol when the number is positive e.g. 61

How can I make slider-result display the + symbol immediately before the number when it is positive?

I have looked at this question but when I try to integrate the solution it displays the + when the number is positive, but it stops displaying the number...

My Attempt

slide: function(event, ui) { 
  $("#slider-result").html(ui.value>0?'+':'') + ui.value;

Any helps is as always, much appriciated. Thanks

Edit - My complete code

$('#submit').click(function() {
    var username = $('#hidden').val();
    if (username == "") username = 0;  //SHOULD THIS STILL BE 0?
    $.post('comment.php', {
        hidden: username
    }, function(return_data) {
        alert(return_data);
    });
});

$(".slider").slider({
    animate: true,
    range: "min",
    value: 0,
    min: -100,
    max: +100,
    step: 1,

    slide: function(event, ui) { 
      $("#slider-result").html(ui.value>0?'+':'') + ui.value;

      //this updates the hidden form field so I can submit the data using a form
      if($(this).attr("id") ==  "one")
          $("#hidden1").val(ui.value);
    }
});

Upvotes: 1

Views: 3194

Answers (2)

j08691
j08691

Reputation: 207901

You just need to put the ui.value inside the html function:

$("#slider-result").html(ui.value>0?'+' + ui.value:'' + ui.value);

jsFiddle example

Upvotes: 1

Caner Akdeniz
Caner Akdeniz

Reputation: 1862

You would have to include the + ui.value; inside of the parentheses as well:

$("#slider-result").html((ui.value>0?'+':'') + ui.value);

Since you only have the '+' or '' inside of the html() method, it will only put those values and not include the actual value.

Upvotes: 2

Related Questions