Александр Талалаев

.testClass {
  font-size: 1.5em;
  text-align: center;
  color: #bf4f74;
}

.testClass::before {
  content: 'QQ';
  position: absolute;
  top: 10px;
}

// ... 
const [textColour, setTextColour] = useState('blue');
const TestElement = styled.h1`  
  &:before {
    color: ${textColour}
  }
`;

 return (
    <>  
  <button
          onClick={() =>
            setTextColour((color) => (color === 'black' ? 'red' : 'black'))
          }
        >
          Change color of :before
        </button>   
      <Title TestElement="testClass"> HELLO </Title>
    </>
  );

document.querySelector('[d="M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414Z"]').parentElement.parentElement;

import * as React from 'react';
import styles from './style.module.scss';

export default function App() {
  // состояние для левого
  const [leftVal, setLeftVal] = React.useState(2500);
  // состояние для правого
  const [rightVal, setRightVal] = React.useState(7500);
  //  Константы для ограничения макс и минимального значения
  const MINVAL = 0;
  const MAXVAL = 10000;
  return (
    <div className={styles.main}>
      <div className={styles.slider}>
        <div className={styles.slider__progress} />
      </div>
      <div className={styles.range}>
        <input
          type="range"
          name="range-min"
          min={MINVAL}
          max={MAXVAL}
          value={leftVal}
          onChange={(e) => setLeftVal(parseInt(e.target.value))}
        />
        <input
          type="range"
          name="range-max"
          min={MINVAL}
          max={MAXVAL}
          value={rightVal}
          onChange={(e) => setRightVal(parseInt(e.target.value))}
        />
      </div>
    </div>
  );
}

//код общий и для мобилок
.elem {
//...
}
//код для устройств 768++
@media (min-width: 768px) {
// ... 
}
//код для устройств 768++
@media (min-width: 768px) {
// ... 
}
//код для устройств 1024++
@media (min-width: 1024px) {
// ... 
}
//и тп

@media(max-width: 991px){
    html{
        font-size: 10px;
    }
   .shapka-element {
        font-size: 12px;
    }
}