Onsen-ui combines a carousel with a range of input and listener / method actions

Question

I have an onsen-ui project and I'm using the Monaca Cloud IDE to create it. I am still struggling with a few key concepts when it comes to onsen-wi, but I can't figure it out from preparing documents.

I'm currently trying to implement the "range" input on the onsen carousel. Entering a range is displayed just fine, but I can’t move it. When I try to displace it, I actually scroll the carousel. My current idea to solve this problem is to set the whole carousel to “off”, since it is not so important for the user to scroll back the page (on the previous page) (although that would be nice). One of my biggest problems is action listeners and methods of invoking methods related to ons components ....

<ons-page>
  <ons-carousel fullscreen swipeable auto-scroll auto-scroll-ratio ="0.2">
    <ons-carousel-item>
      <img class="custom_logo_top_welcome" src="images/Leaf_PNG.png"/>
      <br />
      <br />
      <br />
      <p class="custom_p_welcome">Start saving today and see the likely value when you retire.</p>
      <div class="custom_bottom_div_welcome"><p class="custom_bottom_p_welcome">Swipe left</p></div>

    </ons-carousel-item>
    <ons-carousel-item >
      <p class="custom_dateOfBirth_p_setup">Please enter your date of birth:</p>
      <div class="custom_datePicker_div_setup"><p>Test Div</p></div>
      <p class="custom_dateOfRetirement_p_setup">What is your expected retirement age?</p>
      <input type="range" class="range custom_range_setup" />

      <div class="custom_bottom_div_setup"><ons-button class="custom_bottom_button_setup" onclick = "navToIndex()">Done</ons-button></div>

    </ons-carousel-item>
  </ons-carousel>
</ons-page>

So, basically, I’m thinking about making the carousel "disabled" here when the user goes through the second carousel element.

How can I do it? If there is a better way to solve the problem, please feel free to share it.

Thanks in advance!

Answer 1

, . , .

index.html:

document.addEventListener('ons-carousel:postchange', function(event){
  if (event.activeIndex === 1) {
    rangeTouchEvents();
  }
});

, , : (: .js, index.html)

function rangeTouchEvents()
  {
    ons.ready(function() {
      var range = document.getElementById("range");
      range.addEventListener('touchstart', function () {
        document.querySelector("ons-        carousel").removeAttribute("swipeable");
      });
      range.addEventListener('touchend', function () {
        document.querySelector("ons-carousel").setAttribute("swipeable", "");
      });
    });
  }

:

- , <ons-carousel>. , , , 1. 1 , ( ). 1, , .

"range". , , "false". , . "true".

, "touchStart" "touchEnd" - onsen. <ons-page> ( , , .) index.html, , "" , 1, . <ons-carousel>, , 1 . , , .

@AndiPavlio @FranDios

Answer 2

range, carousel, - :

HTML

id="range" range, :

<input id="range" style="position: absolute; top: 300px" type="range" class="range custom_range_setup" /></div>

JS

ons.ready(function() {
  var range = document.getElementById("range");
  range.addEventListener('touchstart', function () {
    document.querySelector("ons-carousel").removeAttribute("swipeable");
  });
  range.addEventListener('touchend', function () {
    document.querySelector("ons-carousel").setAttribute("swipeable", "");
  });
});

range, carousel swipeable , . .

, !

Answer 3

, / ? .

Onsen UI 1.x :

document.addEventListener('ons-carousel:postchange', function(event){
  if (event.activeIndex === 1) { // Second item
    event.carousel.setSwipeable(false);
  }
});

, !

Answer 4

Onence UI 2.x "postchange" "ons-carousel: postchange".

:

document.addEventListener('postchange', function(event){
  // Handle the event
});