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;