noUiSlider inside Accordion – possible or not?

Hi There,

Is it possible to include noUiSlider inside Accordion?

I inserted a script (see below) for noUiSlider  inside the accordion which works on page but won't show up inside Accordion.

Maybe there's need to add something into the script? Thank you for your answer!

Типы транспортеров

Заданным параметрам соответствует 0 моделей транспортеров

Тип транспортера
Модель
Грузоподъемность
Максимальная длина площадки
Вид груза

var regularSlider = document.querySelector('.regular-slider')
// wNumb is their tool to format the number. We us it to format the numbers that appear in the handles
var dollarPrefixFormat = wNumb({postfix: ' тонн', decimals: 0})
var slider = noUiSlider.create(regularSlider, {
// two handles
start: [0, 700],
// they are connected
connect: true,
// their minimal difference is 5 - this makes sense, because we want the user to always find items
margin: 5,
// tooltip for handle 1 and handle 2
tooltips: [dollarPrefixFormat, dollarPrefixFormat],
pips: {
mode: 'steps',
density: 5,
format: dollarPrefixFormat
},
// start and end point of the slider - we are going to calculate that later based on a set of items
range: {min: 0, max: 700}
})

var regularSlider2 = document.querySelector('.regular-slider2')
// wNumb is their tool to format the number. We us it to format the numbers that appear in the handles
var dollarPrefixFormat2 = wNumb({postfix: ' мм', decimals: 0})
var slider2 = noUiSlider.create(regularSlider2, {
// two handles
start: [0, 80000],
// they are connected
connect: true,
// their minimal difference is 5 - this makes sense, because we want the user to always find items
margin: 1,
// tooltip for handle 1 and handle 2
tooltips: [dollarPrefixFormat2, dollarPrefixFormat2],
pips: {
mode: 'steps',
density: 10,
// format: dollarPrefixFormat
},
// start and end point of the slider - we are going to calculate that later based on a set of items
range: {min: 0, max: 80000}
})

var items = [
{
type: 'Сочленённый транспортер',
model: '36-осный, мод.14-607 ',
load: 700,
olength: 15500,
cargo: 'Трансформаторы, Энергоблоки'
},
{
type: 'Сочленённый транспортер',
model: '32-осный, мод.14-139 ',
load: 500,
olength: 15500,
cargo: 'Трансформаторы, Энергоблоки'
},
// ...
]

slider.on('update', function(values){
let filteredItems = filterItems(items, values, slider2.get())
renderItems(filteredItems)
})

function filterItems(items, load, olength) {
return items.filter(item => {
return (item.load >= load[0] && item.load = olength[0] && item.olength <= olength[1])
})
}

slider2.on('update', function(values){
let filteredItems = filterItems(items, slider.get(), values)
renderItems(filteredItems)
})

function renderItems(items) {
var counter = document.querySelector('.counter')
counter.innerHTML = `Выбрано транспортеров: ${items.length}${items.length == 2 ? '' : ''}`
var table = document.querySelector('.results')
table.innerHTML = items.map(item => `

${item.type}

${item.model}

${item.load} тонн

${item.olength} мм

${item.cargo}

`
).join('')

}

table#table12 {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
color: #444444;
}
table#table12 th {
background: #1f425d;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
}
table#table12 th,table#table12 td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
table#table12 th:first-child,table#table12 td:first-child {
text-align: left;
}
table#table12 th:first-child {
border-top-left-radius: 10px;
}
table#table12 th:last-child {
border-top-right-radius: 10px;
border-right: none;
}
table#table12 td {
padding: 10px 20px;
background: #eeeeee;
}
table#table12 tr:last-child table#table12 td:first-child {
border-radius: 0 0 0 10px;
}
table#table12 tr:last-child table#table12 td:last-child {
border-radius: 0 0 10px 0;
}
table#table12 tr table#table12 td:last-child {
border-right: none;
}