CODEWITHSUNDEEP
jquerytwitter-bootstrap
CostCare
CostCare

Reputation: 215

Troubles getting value from bootstrap-slider

I am using a bootstrap slider for a forecasting tool that I am building. I have the following function:

function updateContractConcern () {

    showLoader();

    var funcid = "call_chart_contract_concern"
    var forecastperiod = $('#forecastslider').data('slider').getValue();
    //var forecastperiod = 4;

    console.log('forecastperiod')

    var jqxhr = $.getJSON('functions/getfunctions.php', {
        "forecastperiod":forecastperiod,
        "funcid":funcid}).done(function(dataChart) {

            hideLoader();

            if (dataChart == null) {
                bootbox.alert("Er is geen data voor deze selectie aanwezig");
            } else {
                setBasicPropertiesAverageScoreChart();
                averageScoreChart.dataProvider = dataChart;
                averageScoreChart.categoryField = "organisatie";
                averageScoreChart.validateData();
              }     
        })
        .fail(function() { hideLoader(); bootbox.alert("Er kon geen data verkregen worden uit de database"); }); //When getJSON request fails
}

The problem that I am having here is that the var forecastperiod = $('#forecastslider').data('slider').getValue(); does not give me the value of the slider. Any thoughts on this?

The HTML code is as follow:

 <div class=text-center>
    <label id="labelforecastslider"><i class="fa fa-clock-o" id="iconclock"></i>  Bepaal de forecast periode:</label> <!-- Range -->
    <input id="forecastslider" data-slider-id='forecastslider' type="text" data-slider-min="1" data-slider-max="12" data-slider-step="1" data-slider-value="0"/>
 </div>

The JavaScript that goes with the slider is:

var slider = new Slider("#forecastslider", {
    focus: true,
    formatter: function(value) {
        var months = ['t/m Januari', 't/m Februari', 't/m Maart', 't/m April', 't/m Mei', 't/m Juni', 't/m Juli', 't/m Augustus', 't/m September', 't/m Oktober', 't/m November', 't/m December'];
        return months[value - 1];
    }
});

When I use var forecastperiod = $('#forecastslider').val();, nothing happens, but when I set the variable as a "hard" number like this: var forecastperiod = 2; the code does work.

Upvotes: 0

Views: 134

Answers (1)

Philipp Meissner
Philipp Meissner

Reputation: 5482

Since a bootstrap-slider can be seen as an input field, you want to use the following code:

var forecastperiod = $('#forecastslider').val();

Hope this helps you!

Upvotes: 1

Related Questions