CODEWITHSUNDEEP
javascript
Ziim
Ziim

Reputation: 3

Range slider value

I have this simple countdown which goes from 5 to 0 every 1 second:

<html>
 <head>
  <meta charset="utf-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js">
  </script>
 </head>
 <body>
<button id="start">START</button>
COUNTDOWN:<span id="countdown"></span>
<input id="time_delay" type="range" min="1000" max="10000" value="1000" step="1000">
<span id="time_delay">1000</span>
  <script>
    let start = document.getElementById('start');
    let start_click = rxjs.fromEvent(start, 'click');
    start_click.subscribe(x => console.log('click'));

start_click.pipe(rxjs.operators.tap()).subscribe(
  ()=> {
    let time = rxjs.timer(0, 1000).pipe(
      rxjs.operators.skip(0)
    , rxjs.operators.take(6)
    , rxjs.operators.map(x => 5-x)
      );

    time.subscribe(x => console.log('instant', x));
    let countdown = document.getElementById('countdown');
    time.subscribe(x => countdown.innerText = x);
    start.disabled = true;

    let end = time.pipe(
    rxjs.operators.last()
    , rxjs.operators.repeatWhen(() => start_click)
    );

    end.subscribe(x=>start.disabled = false);
    start_click.subscribe(x => start.disabled = true);
    });
  </script>
 </body>
</html>

I'd like to learn how to change a value with my range slider. For example, when I change the slider, the let time = rxjs.timer(0, 1000) change to let time = rxjs.timer(0, 5000)

Upvotes: 0

Views: 283

Answers (1)

Andriy
Andriy

Reputation: 15472

you can try something like:

const timeDelay = document.querySelector('#time_delay');
const timeDelayView = document.querySelector('#time_delay_view');
rxjs.fromEvent(timeDelay, 'change').subscribe(() => {
  timeDelayView.innerText = timeDelay.value;
});

let start = document.getElementById('start');
let start_click = rxjs.fromEvent(start, 'click');
start_click.subscribe(x => console.log('click'));

start_click.pipe(rxjs.operators.tap()).subscribe(
  ()=> {
    let time = rxjs.timer(0, timeDelay.value).pipe(
      rxjs.operators.skip(0)
    , rxjs.operators.take(6)
    , rxjs.operators.map(x => 5-x)
      );

    time.subscribe(x => console.log('instant', x));
    let countdown = document.getElementById('countdown');
    time.subscribe(x => countdown.innerText = x);
    start.disabled = true;

    let end = time.pipe(
    rxjs.operators.last()
    , rxjs.operators.repeatWhen(() => start_click)
    );

    end.subscribe(x=>start.disabled = false);
    start_click.subscribe(x => start.disabled = true);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>

<button id="start">START</button>
COUNTDOWN:<span id="countdown"></span>

<br>
<input id="time_delay" type="range" min="1000" max="10000" value="1000" step="1000">
<span id="time_delay_view">1000</span>

please also note, that in you code there are 2 elements with the same id time_delay, the id should be unique per page, so I changed span's id to time_delay_view

Upvotes: 1

Related Questions