Onchange Event on Input Type=Range Is Not Triggering in Firefox While Dragging

onchange event on input type=range is not triggering in Firefox while dragging

Apparently Chrome and Safari are wrong: onchange should only be triggered when the user releases the mouse. To get continuous updates, you should use the oninput event, which will capture live updates in Firefox, Safari and Chrome, both from the mouse and the keyboard.

However, oninput is not supported in IE10, so your best bet is to combine the two event handlers, like this:

<span id="valBox"></span>
<input
  type="range"
  min="5"
  max="10"
  step="1"
  oninput="showVal(this.value)"
  onchange="showVal(this.value)"
/>

Check out this Bugzilla thread for more information.

onchange & oninput event listeners not working for my input type range, javascript html css

use change and/or input eventhandlers instead

var slider = document.querySelector('.weather-slider')

  // EVENT LISTENERS
  slider.addEventListener('change',(e)=>{
    console.log('change');
  });
  
    slider.addEventListener('input',(e)=>{
    console.log('input');
  });

<input type="range" class="weather-slider"
     value="1" min="1" max="168" step="2">

Trigger an event at end of onchange for input type range

Hey Gururaj you can try debounce function. It delays the firing of your event handler so you can get your input value at the end of onchange event as you want it. Lodash has a implementation of the debounce function you can use.

$range.on('change', _.debounce(function() {
  $display.text($(this).val());
}, 250));

Here's a little demo for you.

input type range with focus method in firefox not woking

When focus is shifted to input field then you will not be able to slide the slider.
Use following code to resolve it

var p = document.getElementById("price"),    res = document.getElementById("result"),    test=document.getElementById("test"),    timeout = null;
p.addEventListener("input", function() {   test.value = "$" + p.value;   clearTimeout(timeout);   timeout = setTimeout(function(){ test.focus(); }, 400);}, false);

#result {    font-size: 2em;}

<div style="margin-top: 1em">    <h2>Price</h2>    $51<input id="price" type="range" min="51" max="360" value="" />$360</div><input type="text" name="test" value="" id="test"/>

HTML Input range type becomes un-usable by drag action if highlighted in chrome

After a little tinkering I was able to stop this behavior with the following JS:

document.querySelectorAll('input[type="range"]').forEach((input) => { 
    input.addEventListener('mousedown',  () => window.getSelection().removeAllRanges());
});

Why does the onChange event handler on form pick upp dispatched events from select, but not input?

This problem is happening because the "change event" of the input is quiet special. It is managed by "ChangeEventPlugin".

One of the restrictions of this plugin is that the "change" event only will be dispatched if the input value actually changes.

To solve the problem, you have to add this in your code:

useEffect(() => {
    inpRef.current._valueTracker.getValue = () => {
      return 'fake value'
    }
  }, []);

And import "useEffect", of course.

import { useEffect, useRef } from 'react';

So, at the end, the full code will be:

import { useEffect, useRef } from 'react';

function App() {
  const inpRef = useRef();
  const selRef = useRef();

  function onChange(e) {
    console.log(e.target.name); // Only "select" is logged
  }

  function dispatchChange() {
    inpRef.current.dispatchEvent(new Event("change", { bubbles: true }));
    selRef.current.dispatchEvent(new Event("change", { bubbles: true }));
  }

  useEffect(() => {
    inpRef.current._valueTracker.getValue = () => {
      return 'fake value'
    }
  }, []);

  return (
    <>
      <form onChange={onChange}>
        <input ref={inpRef} name="input" />
        <select ref={selRef} name="select" />
      </form>
      <button onClick={dispatchChange}>Trigger change</button>
    </>
  );
}

export default App;

I hope I've helped you.
Have a nice day and happy new year!

How to capture onChange event from a field with object type State

The way you are updating state will need to be adjusted since you are trying to update a property in an array nested within an object. Try something like this:

  const handleChange = (e) => {
    setTrain((prevState) => {
      const newCoachesClass = [...prevState.travelDetails.coachesClass];
      newCoachesClass[0] = {
        ...prevState.travelDetails.coachesClass[0],
        availableTickets: e.target.value
      };
      return {
        ...prevState,
        travelDetails: {
          ...prevState.travelDetails,
          coachesClass: newCoachesClass
        }
      };
    });
  };

Also since your input is of number type, you probably want to initialize availableTickets to a number instead of a string:

const [train, setTrain] = useState({
    trainNumber: "",
    trainName: "",
    fromStation: "",
    toStation: "",
    departureDateTime: "",
    arrivalDateTime: "",
    travelDetails: {   
      coachesClass: [
        {
          availableTickets: 0,
    ...

Check out this codepen for an example: Edit React-Update-Nested-State-Array

Onchange Event on Input Type=Range Is Not Triggering in Firefox While Dragging