jQuery UI Slider not changing default Value

Question

I have setup a slider with jQuery UI, and the correct default value of 60 is displayed. but the slider is still on the very left. It should move to value 60.

https://i.sstatic.net/r2Xfg.jpg

Tried different options found here on StackOverflow but nothing helped.

var gewichtSlider = $("#gewicht-slider").slider({
    min: 40,
    max: 200,
    slide: function(event, ui) {
        $("#gewicht").val(ui.value).trigger('change');
        $("#gewicht-label").text(ui.value);
        $("#gewicht-handle").text(ui.value + ' kg');
    }
});
gewichtSlider.slider('option', 'slide').call(gewichtSlider, null, {value: 60});

The slider is not moving.

JSfiddle: https://jsfiddle.net/tz6pea5c/

60 seems very close to the minimum (40) does it move if you set it to 100? — Mick Vader
– Mick Vader, Commented Oct 2, 2019 at 13:30
Please provide a Minimal, Reproducible Example: stackoverflow.com/help/minimal-reproducible-example — Twisty
– Twisty, Commented Oct 2, 2019 at 23:28
@MickVader I created a fiddle for this. No matter what default value it is always on the left. — Daniel Barenkamp
– Daniel Barenkamp, Commented Oct 7, 2019 at 9:15

Vaidas · Accepted Answer · 2019-10-08 10:39:44Z

The default value of slider is set using value property. To show initial value in your label, you need to add a create callback, which is being called right after the slider was initialized. Then, you need to add a slide callback to react to sliding event and change label's value accordingly. Lastly, I removed a hidden input field and showed you how to retrieve a value from the slider itself using a button click. If you need a value to be saved in a hidden input field instead, then you can modify setSliderValue function like that:

function setSliderValue(value) {
  $sliderLabel.text(value + " kg");
  $("#your-hidden-field-id").val(value);
}

Bellow is the full working example:

var defaultValue = 60;
var $sliderLabel = $(".slider-after");

function setSliderValue(value) {
  $sliderLabel.text(value + " kg");
}

var $gewichtSlider = $("#gewicht-slider").slider({
    min: 40,
    max: 200,
    value: defaultValue,
    create: function() {
      setSliderValue(defaultValue);
    },
    slide: function(event, ui) {
    	setSliderValue(ui.value);
    }
});

$("#current-value").click(function() {
	alert($gewichtSlider.slider( "value" ) + " kg");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>


<div class="gewicht-container question-container">
  <label for="gewicht">Wie schwer bist du?</label>
  <p class="question-desc">Dies ist eine wichtige Angabe für die Matraztenhärte. Daten werden nicht gespeichert ;)</p>

  <div class="slider">
    <div class="slider-before">
      Gewicht
    </div>
    <div id="gewicht-slider">
      <div id="gewicht-handle" class="ui-slider-handle"></div>
    </div>
    <div class="slider-after">
    </div>
    <div class="clearfix"></div>
  </div>

  <hr/>
  <button id="current-value">Get current value</button>
</div>

that is great, but the handle does not contain this value. Is there a way to trigger a "slide" after the value is set?

Twisty · Accepted Answer · 2019-10-07 17:17:26Z

0

Here is a working example: https://jsfiddle.net/Twisty/34eg1xc9/21/

JavaScript

var gewichtSlider = $("#gewicht-slider");
gewichtSlider.slider({
  min: 40,
  max: 200,
  create: function(e, ui) {
    $("#gewicht-handle").css({
      width: "3em",
      textAlign: "center"
    }).text('60 kg');
    gewichtSlider.slider('value', 60);
  },
  slide: function(event, ui) {
    $("#gewicht").val(ui.value).trigger('change');
    $("#gewicht-handle").text(ui.value + ' kg');
  }
});

I could not find $("#gewicht-label") in your code. I also made use of create callback to setup the slider.

answered Oct 7, 2019 at 17:17

Twisty

31k2 gold badges30 silver badges50 bronze badges

Collectives™ on Stack Overflow

jQuery UI Slider not changing default Value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related