REACT: Disable the first handler in nouislider at react

98 Views Asked by At

In my React project I am using noUislider as a custom range.I need to disable first handler so that I can only move second.

In documentation I found the function: "slider.noUiSlider.disable(1)". When I use it I get this error "Uncaught TypeError: slider.noUiSlider.disable is not a function". Slider is defined, but hasnt this function as a method

Part of code where I need to disable handler

import React, { useEffect, useMemo, useState } from "react";
import s from "./Bar.module.scss";
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";


const VideoBar = ({ duration, playingSeconds, setTime}) => {
  const [slider, setSlider] = useState(null);

  useMemo(() => {
      if (slider) {
          slider.noUiSlider.set([null, playingSeconds]);
      }
  }, [playingSeconds]);
  useEffect(() => {
      if (slider) {
          slider.noUiSlider.disable(1);
      }
  }, [slider]);
  return (
      <div className={s.bar}>
          <span className={s.loaded} ></span>
          <Nouislider
              instanceRef={(instance) => {
                  if (instance && !slider) {
                      setSlider(instance);
                  }
              }}
              onChange={(e) => setTime(Math.round(e[1]))}
              id={s.playedId}
              range={{ min: 0, max: duration }}
              start={[0, 0]}
              connect
          />
      </div>
  );
};

export default VideoBar;
0

There are 0 best solutions below