Dynamically rendering a range slider in javascript in Framework7

Questions
1

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

2

here you have an example

jsfiddle

2 Likes
3

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)?

4

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

2 Likes
5

: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
6

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?

7

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
8

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

9

Dear pvtallulah,

Sorry for the delayed response, but finally ready to implement this.

I succeed in reproducing your coding using the ‘methods’ variable. However, I would like to put the code in a seperate js function, because the app needs the capacity to render the slider on different pages based on the admin settings (it is a survey app). How to achieve this?

To take the jsfiddle as starting point, the issue is on line 59; where the range slider is activated which now provides an error. What do I need to put before .range.create({el: ‘.d-range’}) ?

Any help is welcome.

Thanks!

10

Finally I managed, thank you pvtallulah!

@nonickknown, I bump into the same issue now. That is, if I create multiple rangers (dynamically) on one page, and call

  var range = app.range.create({
      el: '.element',
	});

Only the last rendered ranger is properly initialized. The other sliders cannot be ‘slided’.

Have you found a solution for this issue too?

11

this.$el.find(‘…’).each(… create…)

1 Like
12

Thanks @shastox for your super fast reply. But,

I tried

mainView.$el.find('.range-slider').each(app.range.create)

but without success.

Using mainView.$el.find('.range-slider') I can select the sliders, this.$el.find('.range-slider') is undefined.

Thanks for your help.
Peter

PS. For now I added a loop that does the trick.

13

Hi @peterk,

No I did not find a solution there. Can you show me what you did in your loop to get it running?

Greeting

14

Ok, here it comes…

  • On pageBeforIn fire a function that renders the sliders in a first loop;

  • When all the sliders are rendered, run a second loop to initiate the sliders (“enable the knob”)

 sliders = mainView.$el.find('.range-slider')
                    for (var i=0, len=sliders.length; i< len; i++){
                        var range = app.range.create({
	                       el: sliders[i],
	                    }); 
                    }
                    }

Hope it works for you too.

1 Like
15

Hi @peterk,

it seems not to work but i think this is because of my little knowledge of framework7 and developing on javascript …

as documented on this page https://framework7.io/docs/page.html#page-events
$$(document).on(‘page:init’, function (e) {
console.log("…Works… --> page:init")
})
works and outputs my string to the console…
trying the same with ‘page:beforein’ does not write any output to the console…
therefore the slider workaround can’t be tested by me :frowning: what am i doing wrong?

Thanks for your help!

16

It is pageBeforeIn (https://framework7.io/docs/view.html). Have you tried that?

17

It does still not work … :frowning:
i think something is wrong with my current implementation, i will start from scratch using @pvtallulah his jsfiddle example and try to get it running there :confused:

18

@peterk, @nonickknown,

Here you have a fiddle, no events needed, just an id.

jsfiddle

2 Likes
19

Thanks @pvtallulah!!!

i will try to adapt this

Greetings

20

finally it worked! thanks @pvtallulah!