Slider range initialization

Questions
1

Hi, I use Framework7 for the first time, and currently I would like to add some range sliders… But I can’t do it and I don’t know/understand my error.

So I need some help ! I just do this in my html file :

<div class="range-slider range-slider-init " data-label="true">
	<input type="range" min="0" max="100" step="10" value="50">
</div>

The range slider is visible but I don’t see the value of the range when i’m clicking and dragging on it. I tried to initialize it with DOM7 in my js file but I always have the same error " .create is not a function " so I don’t understand why it doesn’t work with range slider but, for example, I already did it with another component like calendar.

My initialization of a slider :

 var range = myApp.range.create({
	  el: '.slider-range',
	  on:{
		change:function(){
		  console.log("created");
		}
	  }
	});

and this block of code is in a pageInit(), is it a pb maybe ?

thanks in advance for your help !

2

Are you sure you are using v2?

3

I was not sure about it, i have replace my file f7 by your last version. Now I have pb with pageInit and addView functions. I’ll work to fix it and see if range sliders are working with the last version

5

I’m working to fix all bugs made from the new syntax of the v2, but I don’t know how can I fix this :

mainView.router.load({
		template: myApp.templates.home,
		animatePages: false,
                reload: true,
});

The error is " Cannot read property ‘home’ of undefined " but, home is defined, i made a link with the property data-page and id like this :

	  <script type="text/template7" id="home">
		<div class="page" data-page="home">
			...
		</div>
	  </script>

Is it enough ?

6

You can’t fix this. You need to use and configure routes instead in v2:

7

So I can’t use the method one page with Framework7 anymore ?

8

There is no such API anymore:

You need to mainView.router.navigate('/homepage/', { reloadCurrent: true, animate: false });

And in routes you need the following route:

{
  path: '/homepage/',
  template: $('script#home').text(),
}
9

Oh, ok. Thanks for your help