Dynamically Creating bootstrap-sliders with jquery or javascript


I'm trying this with no success. For reference, the bootstrap slider is here : <a href="http://seiyria.github.io/bootstrap-slider/" rel="nofollow">http://seiyria.github.io/bootstrap-slider/</a>.

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.


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.

<pre class="snippet-code-js lang-js prettyprint-override">$(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); }); } <pre class="snippet-code-html lang-html prettyprint-override"><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>


  • Delete duplicate records that do not exist in other table
  • How to subtract two date time in mongodb
  • LIKE operator for array value of column
  • storing multiple values in one field
  • Optimizing Keras to use all available CPU resources
  • How to handle null values in Angular
  • Saving and loading jpeg images to database not working DELPHI
  • How do I organize such database in SQLite?
  • ValueError: 0 is not in list when running this code
  • python regex [:alpha:]
  • Grails 3 on Bamboo
  • C# Outlook - Call Rejected By Callee
  • Strategy to auto-generate PHP code?
  • replace letters in python string
  • How can I parse error messages from TypeScript in Sublime Text 2?
  • SQL Server - CTE Recursive, Looping in Child's Data?
  • What should be the return value of a custom function addEdge in a new class based on BGL?
  • XNU incudes in Kext
  • “mvn clean generate-source” could not resolve dependencies
  • Update Google Maps traffic layer without page reloading
  • Best way to dynamically load an xml configuration file into a Flex4/Flash movie at runtime?
  • Pycharm: Marking a folder as 'sources root' is not recursive for subfolders
  • Button click event not firing in jQuery
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Chart.js Multiple dataset
  • Installed module is empty
  • How do I get HTML corresponding to current DOM tree?
  • Jackson Parser: ignore deserializing for type mismatch
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Chrome doesn't support silverlight anymore? How to solve this?
  • OpenGL ES texture problem, 4 duplicate columns and horizontal lines (Android)
  • How to delay loading a property with linq to sql external mapping?
  • Cannot connect to cassandra from Spark
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • Javascript convert timezone issue
  • Change an a tag attribute in JavaScript based on screen width
  • Weird JavaScript statement, what does it mean?
  • How can I estimate amount of memory left with calling System.gc()?
  • Django query for large number of relationships