noUiSlider inside Accordion – possible or not?

0
noUiSlider inside Accordion - possible or not? 1
heavylog24
Aug 04, 2018 07:55 AM 1 Answers General
Member Since Jul 2018
Subscribed Subscribe Not subscribe
Flag(0)

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;
}

2 Subscribers
noUiSlider inside Accordion - possible or not? 1
noUiSlider inside Accordion - possible or not? 3
Submit Answer
Please login to submit answer.
1 Answers
Sort By:
Best Answer
0
noUiSlider inside Accordion - possible or not? 4
PickPlugins
Aug 04, 2018
Flag(0)

Welcome to our forum.

I guess you are using Free version, displaying shortcode under accordion content only available in pro version. Please see the feature details

https://pickplugins.com/item/accordions-html-css3-responsive-accordion-grid-for-wordpress/

Regards

noUiSlider inside Accordion - possible or not? 5
heavylog24
- Aug 04, 2018 08:29 PM
Flag (0)
0

The issue is solved! You only needed to put the script into HTML widget and put it beneathe the accordions widget beneath the Accordion widget in page builder. I think you should include this into your manual.

When you put entire script into Accordion it may not work. So you have to put the script into other html-widget on page builder and put the rest of code (CSS, HTML) – inside accordion. Then it works!

noUiSlider inside Accordion - possible or not? 5
heavylog24
- Aug 04, 2018 03:12 PM
Flag (0)
0

No, I am using Pro Version. Could you, please, check once again?

Sign in to Reply
Replying as Submit