seiyria/bootstrap-slider getValue() not working

Question

I've looked through all the answers on this topic, but for some reason I can't get it to work. I've set up a slider with the following markup:

<input data-slider-id="Xslide" type="text" data-provide="slider" data-slider-min="0" data-slider-max="10" data-slider-step=".5" data-slider-value="0" data-slider-tooltip="show" data-slider-orientation="vertical" data-slider-reversed="true"></input>

What I want first of all is to console.log its numerical value. I've tried playing with the type to number or text but that didn't work. I tried as per the example on GitHub:

var mySlider = $("Xslide").slider();
var value = mySlider.slider('getValue');
console.log(value);

but that produced the error $(...).getValue is not a function

I tried writing $('#Xslide').data('slider').getValue() but that produced the error $(...).data(...) is undefined.

I tried solutions offered on the example page like

$('#Xslide').slider({
    formatter: function(value) {
        console.log('Current value: ' + value);
    }
});

but that just doesn't show anything in the console at all..

I've included the following js and css files:

<script src="js/bootstrap-slider.min.js"></script>
<link href="stylesheets/bootstrap-slider.min.css" rel="stylesheet">

Not sure why it isn't working... perhaps it's something about the input element id or the type, but any help would be appreciated.

Answer 1

In any case so far I've solved it using:

var Xslide = new Slider('#Xslide'); 

Xslide.on('slideStop', function (value) { document.getElementById('xval').innerHTML = value; 
})

Thanks!