I want to dynamically create bootstrap slider, so I decided to using dom to create one.
Now my js code is like this:
const newItem = document.createElement('input');
newItem.setAttribute('id', 'slider');
newItem.setAttribute('type', 'text');
newItem.setAttribute('data-provide', 'slider');
newItem.setAttribute('data-slider-min', '1');
newItem.setAttribute('data-slider-max', '3');
newItem.setAttribute('data-slider-step', '1');
newItem.setAttribute('data-slider-value', '1');
newItem.setAttribute('data-slider-tooltip', 'hide');
But it only displays a text box, I use Chrome dev tool to inspect the element, it looks like this:
<input id="slider" type="text" data-provide="slider" data-slider-min="1" data-slider-max="3" data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide">
My configuration seems right because I create a slider successfully using html, like this:
<input
type="text"
data-provide="slider"
data-slider-min="1"
data-slider-max="3"
data-slider-step="1"
data-slider-value="3"
data-slider-tooltip="hide"
>
In bootstrap-slider, it said:
Create an input element with the data-provide="slider" attribute automatically turns it into a slider.
So the problem seems like that bootstrap-slider did not interpret my attribute.
I guess you need to initialize your slider something like this (if you're not using jQuery):
// Instantiate a slider
var mySlider = new Slider(newItem, {
// initial options object
step: 1,
min: 1,
max:3,
value: 1,
tooltip: 'hide'
});
So, In your case, if you also want to build a dynamic input and then attach a slider to it, your whole code would look like this:
// Create an input element dynamically
var newItem = document.createElement('input');
const body = document.querySelector('body');
// Add your new created element to body (or any other div)
body.appendChild(newItem);
// Instantiate a slider
var mySlider = new Slider(newItem, {
// initial options object
step: 1,
min: 1,
max:3,
value: 1,
tooltip: 'hide'
});
Here I built a live demo for you: https://jsfiddle.net/abhishekraj007/hdr253xb
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments