Slider value changes on slide but not on click

Question

I have a slider on a Wordpress website, it's custom code not a plugin. When I slide the slider, the value changes, but when I click, nothing happens. I would like the slider to work when sliding or clicking.

Here is the code:

jQuery("#ex1").slider();
jQuery("#ex1").on("slide", function(slideEvt) {
    var pret = jQuery("#pret").val();
    var mois = slideEvt.value;
    var final = 0
    var annee = 0
    var nbmois = 0
    var pretlong = false

    if(mois>12){
        nbmois = mois%12
        final = pret*1.039
        annee = mois/12
        annee = Math.floor(annee)
        pretlong = true
        console.log(annee)
    }else
        final=pret

    final = final / mois
    console.log(pret)
    console.log(mois)
    console.log(final)

    if(pretlong)
        jQuery("#mois").text(mois+" mois (soit "+annee+" an(s) et "+nbmois+" mois)");
    else
        jQuery("#mois").text(mois+" mois");

    jQuery("#montant").text(final.toFixed(2) + "€ TTC sur "+mois+" mois");
});

I'd be grateful if you could help me out. Here is the link where it appears. http://www.smf-services.fr/habitat/simulateur-financement/

Here it is github.com/seiyria/bootstrap-slider thanks for your help! — Thomas Preston
Try changing jQuery("#ex1").on("slide", ... to jQuery("#ex1").on("change", — ugh StackExchange
I tried that but it didn't quite work, instead, I managed using this: var slide = jQuery("#ex1").slider(); jQuery("#ex1").on("change", function(slideEvt) { var pret = jQuery("#pret").val(); var mois = slide.slider("getValue"); — Thomas Preston

Guruprasad J Rao Guruprasad J Rao · Accepted Answer · 2016-06-07T10:20:48

There isn't any official way of doing this [Atleast I haven't found one] IMHO. But, you can make use of change event of the plugin and move your update code into a separate function, where you pass the value to update and call the function on both change and slide event. change event will have a parameter which has value property as object. This object contains old value and new value, which you can make use of. Consider below example.

jQuery("#ex1").on("slide", function(slideEvt) {
    //moved code from here into a separate function below named updateValue
    //which accepts value as parameter
    updateValue(slideEvt.value);//call the function
}).on('change', function(val) {
    //val parameter above has value object which contains newValue 
    updateValue(val.value.newValue);
});

function updateValue(value) {
    var pret = jQuery("#pret").val();
    var mois = value;
    var final = 0
    var annee = 0
    var nbmois = 0
    var pretlong = false
    if (mois > 12) {
        nbmois = mois % 12
        final = pret * 1.039
        annee = mois / 12
        annee = Math.floor(annee)
        pretlong = true
    } else
        final = pret
    final = final / mois
    if (pretlong)
        jQuery("#mois").text(mois + " mois (soit " + annee + " an(s) et " + nbmois + " mois)");
    else
        jQuery("#mois").text(mois + " mois");

    jQuery("#montant").text(final.toFixed(2) + "€ TTC sur " + mois + " mois");

}

Slider value changes on slide but not on click

1 Answers

`DEMO HERE`