setvalue does not work if slider initiated with pure data-api

[rob-lindman]

I am initiating the bootstrap slider with the following.

  <input
    type="text"
    class="matrix" 

    id="matrix-b" 
    name="matrix-b" 
    data-provide="slider"
    data-slider-min="-6"
    data-slider-max="6"
    data-slider-step="0.02"
    data-slider-value="0"
  >

I have a reset button, which I verified fires a function. after manipulating the slider to a value other than 0, I click the reset button. The function should set the slider to 0. The sliders do not visually change. I have attempted each of these different methods to reset the slider to 0.

    $('matrix-b').text(0);
    $('matrix-b').slider('setValue', 0);
    $('matrix-b').bootstrapSlider('setValue', 0);
    $('matrix-b').bootstrapSlider('setValue', 0, true, true);

I even attempted to locate and the data-value attribute manually.

Note that I instanciated these sliders solely with the data-api and did not call a slider() or bootstrapSlider function. Perhaps this is in error. However, the sliders themselves work fine and I can retrieve their value. Setting their value with jQuery (3.3.1) simply does not seem to provide a visual or data change.

It's possible I am overlooking something, I've been trying to figure this out for over two hours and I've reached my coma point. I reviewed the docs but could not find an example which matches my use case, so I am reporting this. It's entirely possible I am missing something basic.

Thanks.

[jespirit]

I quickly wrote a JSFiddle matrix-b example

It turns out it was just a syntax error when using JQuery.

You have to use the pound symbol # when selecting elements by id.

JQuery docs: ID Selector (“#id”)

Wrong

$('matrix-b').text(0);
$('matrix-b').slider('setValue', 0);
$('matrix-b').bootstrapSlider('setValue', 0);
$('matrix-b').bootstrapSlider('setValue', 0, true, true);

Correct

$('#matrix-b').text(0);
$('#matrix-b').slider('setValue', 0);
$('#matrix-b').bootstrapSlider('setValue', 0);
$('#matrix-b').bootstrapSlider('setValue', 0, true, true);

[seiyria]

Thanks, sounds like this is resolved.

[rob-lindman]

oh jeez. thanks. I was so tired last night. I knew I had to be missing something obvious. thanks so much.

[rob-lindman]

I implemented the fix that @jespirit recommended. for someone else who might run into this problem, the method was still incomplete. The display must be refreshed.

    $('#matrix-b').data('slider-value', 0);
    $('#matrix-b').slider('refresh');

it works. I am free!