elem.addEventListener('mousemove', function (event) {
// добавляем обработчик события "mousemove"
const x = event.clientX; // получаем координату X мыши
const y = event.clientY; // получаем координату Y мыши
console.log(`Координаты мыши: x=${x}, y=${y}`); // выводим координаты мыши в консоль
});
import "./styles.css";
import React, { useState, useEffect, useRef } from 'react';
export default function App() {
const [value, setValue] = useState(1);
const rangeRef = useRef(null);
const handleChange = (e) => {
setValue(parseInt(e.target.value));
};
useEffect(() => {
const rangeElement = rangeRef.current;
const rangeWidth = (value / 20) * rangeElement.offsetWidth;
rangeElement.style.setProperty("--range-width", `${rangeWidth}px`);
}, [value]);
return (
<div className="App">
<input
type="range"
min="1"
max="20"
value={value}
onChange={handleChange}
ref={rangeRef}
/>
</div>
);
}
.App {
text-align: center;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
margin-top: -6px;
margin-left: -2px;
width: 35px;
height: 15px;
background: #fbb03b;
border-radius: 6px;
cursor: ew-resize;
}
input[type="range"]::before {
content: "";
position: absolute;
top: -1px;
left: -2px;
width: 0;
height: 3px;
background-color: red; /* Здесь можно изменить цвет */
transform: translateY(-50%);
transition: width 0.3s ease-in-out; /* Добавьте плавный переход */
z-index: -1; /* Добавить z-index: -1 */
}
input[type="range"]::before {
/* ... */
width: var(--range-width, 0);
}
input[type="range"] {
-webkit-appearance: none;
position: relative; /* Добавить position: relative */
}
try {
// код...
} catch (err) {
// обработка ошибки допустим error как вам надо, любой код
}
import React, { useState } from 'react';
import AppRu from './App-ru';
import AppEng from './App-eng';
import AppHebrew from './App-hebrew';
import stylesHeader from './components-ru/headers/Header.module.css';
function App() {
const [language, setLanguage] = useState(0);
const [carouselIndex, setCarouselIndex] = useState(0);
const languages = [AppRu, AppEng, AppHebrew];
const buttonTexts = ['Ru', 'Eng', 'Heb'];
const handleClickLanguage = () => {
if (language === buttonTexts.length - 1) {
setLanguage(0);
} else {
setLanguage(language + 1);
}
setCarouselIndex(0);
};
const handleClickCarousel = () => {
if (carouselIndex === languages.length - 1) {
setCarouselIndex(0);
} else {
setCarouselIndex(carouselIndex + 1);
}
};
const CurrentLanguage = languages[language];
return (
<div>
<div className={stylesHeader.languageSettingsButton} onClick={handleClickLanguage}>
<h1 className={stylesHeader.languageSettingsText}>{buttonTexts[language]}</h1>
</div>
<div onClick={handleClickCarousel}>
<CurrentLanguage />
<languages[carouselIndex] />
</div>
</div>
);
}
export default App;