Dynamically Creating bootstrap-sliders with jquery or javascript

Question

I'm trying this with no success. For reference, the bootstrap slider is here : http://seiyria.github.io/bootstrap-slider/.

I'm not a javascript expert, either, so this might be very simple. The bootstrap-slider site has many examples of how to configure the sliders the way you want them. I'm going to have many sliders generated depending on how many objects are pulled from a JSON file or some other data storing method. It could be 2 or it could be 20.

I created a javascript function called createSlider that I've attempted to pass all of the information required at the bootstrap-slider site. I'm not getting any errors in my Chrome debugging area, but nothing is happening. All of the appropriate client-side sources are loading.

function createSlider (orgId) {
slidersList = document.getElementById('slidersList');
element = slidersList.createElement("div");
var sliderElement = element.createElement('input');

var sliderUnique= orgId.concat("Slider");
var sliderUniqueVal = orgId.concat("SliderVal");
sliderElement.setAttribute('id', charityId);
sliderElement.setAttribute('data-slider-id', sliderUnique);
sliderElement.setAttribute('type', 'text');
sliderElement.setAttribute('data-slider-min', '0');
sliderElement.setAttribute('data-slider-max', '100');
sliderElement.setAttribute('data-slider-step', '1');
sliderElement.setAttribute('data-slider-value', '50');

var span = element.createElement('span');
span.setAttribute('style', 'padding-left:5px;');
span.innerHTML =' ';

var innerSpan = span.createElement('span');
innerSpan.setAttribute('id', sliderUniqueVal);
innerSpan.innerHTML = '50';

sliderElement.slider({tooltip: 'hide'});
sliderElement.on("slide", function(slideEvt) {
    innerSpan.innerHTML = text(slideEvt.value);
});

}

The slider() function is from the external site, and runs fine if I explicitly call it like the examples state to. Anyone know what's going wrong? Is there a better way to do this? Any ideas would be appreciated.

mccannf · Accepted Answer · 2014-09-30 11:35:54Z

Note, in plain JavaScript, you can only use document.createElement and then append to another HTML element. You cannot call createElement directly against another HTML element.

I changed some of what you wrote from plain old JavaScript into JQuery, and now seems to work:

P.S. Didn't know where charityId came from, so just added it as another parameter into the function.

$(function() {
    createSlider('o1','c1');
    createSlider('o2','c2');
    createSlider('o3','c3');
});

function createSlider (orgId, charityId) {
    var slidersList = $('#slidersList');
    var element = $("<div></div>").appendTo(slidersList);
    var sliderElement = $("<input/>").appendTo(element);

    var sliderUnique= orgId.concat("Slider");
    var sliderUniqueVal = orgId.concat("SliderVal");
    sliderElement.attr('id', charityId);
    sliderElement.attr('data-slider-id', sliderUnique);
    sliderElement.attr('type', 'text');
    sliderElement.attr('data-slider-min', '0');
    sliderElement.attr('data-slider-max', '100');
    sliderElement.attr('data-slider-step', '1');
    sliderElement.attr('data-slider-value', '50');

    var span = $('<span></span>').appendTo(element);
    span.attr('style', 'padding-left:5px;');
    span.html(' ');

    var innerSpan = $('<span></span>').appendTo(span);
    innerSpan.attr('id', sliderUniqueVal);
    innerSpan.html('50');

    sliderElement.slider({tooltip: 'hide'});
    
    sliderElement.on("slide", function(slideEvt) {
           innerSpan.text(slideEvt.value);
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css"  href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css">
<script type='text/javascript' src="http://seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>
<div id="slidersList"></div>

This works perfectly, thanks. I didn't know I couldn't use javascript alone- jquery is working fine.

Collectives™ on Stack Overflow

Dynamically Creating bootstrap-sliders with jquery or javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related