How to render nouislider tooltips as input?

Question

JavaScript

Hello. I am using nouislider and needed to use tooltips. That is, the variables will move along with the slider. Here is an example using refreshless.com/nouislider/examples/#section-tooltips . Look at the part of the code:

// Add divs to the slider handles.
for ( var i = 0; i < tipHandles2.length; i++ ){
  tooltips2[i] = document.createElement('div');
  tipHandles2[i].appendChild(tooltips2[i]);
}
// Add a class for styling
tooltips2[0].className += 'sloower';
// Add additional markup
tooltips2[0].innerHTML = '<span id="sloower"></span>';
// Replace the tooltip reference with the span we just added
tooltips2[0] = tooltips2[0].getElementsByTagName('span')[0];

As a result, there will be a div with the class sloower and a span with the id lower. Tell me how to change to ? If I just write input, then He will open, insert a variable and close it. Maybe you can somehow describe the input in a different way? Tell me what can be done?

Answer 1

Have you seen this example on the same page? refreshless.com/nouislider/examples/#section-html5 It's
easy to combine them