Dynamically rendering a range slider in javascript in Framework7

Hi there,

A couple of days now, I try to add some range sliders dynamically to a framework 7 page. I found out that I have to use the Range API. I tried to circumvent using it, by copy-pasting the html code of a static range slider. While this mimics the range slider, this ‘fake’ range slider cannot be slided.

Could someone give me a hint how to use the Range API to render range sliders?

Thank you

here you have an example

jsfiddle

2 Likes

Thank you pvtallulah for your help! It is really appreciated.

When I run the jsfiddle however, I only see the slider container, but the slider itself (the knob and line) is not being rendered. Is this an error or caused by my browser (Safari/Chrome)?

Sry, i forgot to set as base the new changes i made.
now it should work fine.

2 Likes

:handshake:

Thank you. Cool! Gives me a better understanding and appreciation of the power of Framework7 codes too.

I let you know when I succeed in implementing this in my app.

1 Like

Hi,

i am also trying to generate dynamic range sliders while initially loading the page.

i tested your example but if i press “create range” a second or third time (and so on) the slider does not get rendered properly… there is no knob and line except for the first one which was created.

is your example working properly for you guys?

The example its just an example you have to change the code. The question was how to add a dynamic range. Not multiple. If you cannot manage to do it maybe I can adapt the example to add multiple ranges

1 Like

Just a quick update; I am currently busy with other tasks. Hope to implement it in about two weeks.