problem on slider('setValue', [1,2])

[neeqkowlah]

i try to set value on a range slider. but it does not work. even if i put a scalar value :(

for example

$("#zone").slider('setValue',1);

on my slider

<input id="zone" name="element_zone" data-slider-id="idzone" type="text" data-slider-min="1" data-slider-max="11" data-slider-step="1" data-slider-value="[4,6]" data-slider-handle="triangle" data-slider-tooltip="show" data-slider-tooltip-position="bottom" data-slider-range="true"/>

bug or problem with myself ? thanks a lot

[seiyria]

Please provide a jsfiddle. Example code does not mean much if we can't see it in action.

[neeqkowlah]

thanks. here a jsfiddle https://jsfiddle.net/c5txzdkg/13/ when you "click here", the slider comes will have the new value 5. if you uncomment zone, nothing happened, and the range slider zone don't move thanks a lot (sorry for my bad english)

[seiyria]

I think setValue is assuming that we pass in an integer, the error is here:

_applyToFixedAndParseFloat: function _applyToFixedAndParseFloat(num, toFixedInput) {
                var truncatedNum = num.toFixed(toFixedInput); // cannot read property toFixed of undefined
                return parseFloat(truncatedNum);
            },

[neeqkowlah]

thanks a lot, Will I receive a notification when the bug is corrected?

[seiyria]

This issue will presumably be closed when that happens, yes. However, the fastest way to get it fixed is to submit a PR with a fix.

[mansouralex]

I'm trying to set the slider value after successful Ajax response - but the value doesn't change from the first initialized value.

This is my code:

$("#down-payment").slider('setValue', 10); var value = $("#down-payment").slider('getValue');

console.log(value);

[seiyria]

If your slider isn't a range slider, it's (probably) not entirely relevant to this issue. Given how often we use setValue in our tests, I'd hazard to suggest that you're probably doing something wrong. The rule of thumb is to always provide a jsfiddle (as we state literally everywhere) because 3 lines of code doesn't help us help you at all.

[rovolution]

@neeqkowlah the problem is that you are calling setValue with only a single value for a range slider.

In the current implementation, if you want to call setValue for a range slider, you have to pass 2 values (for both the min and max handle).

You are only passing one value: $("#zone").slider('setValue',1);

[rovolution]

Though this does raise the intriguing question of "What if a user wants to setValue for an individual handles on a range slider without changing the other handle?"

We could definitely revise the API to handle that case

[neeqkowlah]

In the current implementation, if you want to call setValue for a range slider, you have to pass 2 values (for both the min and max handle).

@rovolution could you please give me an example how to pass 2 values , thanks a lot

[seiyria]

Pass it as an array of size 2.

On Sat, Aug 6, 2016, 03:19 neeqkowlah [email protected] wrote:

In the current implementation, if you want to call setValue for a range slider, you have to pass 2 values (for both the min and max handle).

@rovolution https://github.com/rovolution could you please give me an example how to pass 2 values , thanks a lot

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/seiyria/bootstrap-slider/issues/525#issuecomment-238012402, or mute the thread https://github.com/notifications/unsubscribe-auth/AAum2cgm73V9-MWbu6s3K5T-AlMR8xhzks5qdEODgaJpZM4HWT7j .

[neeqkowlah]

it is what i tried (see it in subject) or i put some errors in the syntax maybe ? could you please write me an example to set the min value to 2 and the max value to 5, thanks a lot

[Dakshank]

@neeqkowlah here you can use an array https://jsfiddle.net/c5txzdkg/18/

[sathyapriya88]

@Dakshank fiddle https://jsfiddle.net/c5txzdkg/18/ doesn't change the values. It set with values given in element.

[cjgordon]

Heads up this can be an issue using Knockout binding if the observable is initiated as ko.observable() but set to [20,230] etc later. Just setup observable as ko.observable([0,0]).

Might help someone.

[ivansammartino]

I came here for this problem too: seems that it's not solved and I have to use $('.slider').slider('setAttribute', 'value', [0,200]); to make it work Is it right?

EDIT: sorry, my fault: seems that I cannot use .slider as selector... at first I thought it was a jQueryUI conflict, but I get cannot call methods on bootstrapSlider prior to initialization in console even when there is no jQueryUI.

An example with .slider (turn on the console): https://jsfiddle.net/ivanhalen/b038xp5y/53/

Changed it to #slider or .range and it works... Strangely I get no errors also if I set a general var mySlider = $('.slider'); and use that instead: https://jsfiddle.net/ivanhalen/9vkd136s/

Please can you confirm that .slider cannot be used?

[jespirit]

I came here for this problem too: seems that it's not solved and I have to use $('.slider').slider('setAttribute', 'value', [0,200]); to make it work Is it right?

EDIT: sorry, my fault: seems that I cannot use .slider as selector... at first I thought it was a jQueryUI conflict, but I get cannot call methods on bootstrapSlider prior to initialization in console even when there is no jQueryUI.

An example with .slider (turn on the console): https://jsfiddle.net/ivanhalen/b038xp5y/53/

Changed it to #slider or .range and it works... Strangely I get no errors also if I set a general var mySlider = $('.slider'); and use that instead: https://jsfiddle.net/ivanhalen/9vkd136s/

Please can you confirm that .slider cannot be used?

You shouldn't be using .slider because the slider instance is only associated with the <input> element.

https://github.com/seiyria/bootstrap-slider/blob/96717603762e700e37ec2e8cf62996a7fdf9d8e7/src/js/bootstrap-slider.js#L152-L157

Wrong:

var $div = $('.slider');
$div.slider('setValue', [0, 100]);

Correct:

var $input = $('#slider');
$input.slider('setValue', [0, 100]);

[carlosgodinez24]

I tried with this using float values in the slider, at least for my purpose, my slider is from 0.00 to 100.00 because i'm working with percentages. I think the refresh at the end is the key.

$('#txtPercent').on('keyup', function () {
    var val = 0;
    if (!isNaN(this.value)) {
        if (this.value < 0) {
            val = parseFloat(0);
        } else if (this.value > 100) {
            val = parseFloat(100);
        } else if(this.value >= 0 && this.value <= 100) {
            val = parseFloat(this.value);
        }
    } else {
        val = parseFloat(0);
    }
    console.log('val => ' + val);
    $('#sliderB1').slider({
        precision: 2,
        value: val
    });
    $('#sliderB1').slider('refresh');
});