react range slider using radix ui, tailwind css

const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('profile'))); //convert to object

const logout = () =>{
        dispatch({type: 'LOGOUT'});
        history.push("/");
        setUser(null);
    }

    useEffect(()=>{
        const token = user?.token;

        //JWT check if token expired
        if(token){
            const decodedToken = decode(token)
            if(decodedToken.exp*1000 < newDate().getTime()) logout();
        }
        setUser(JSON.parse(localStorage.getItem('profile')))
    },[location])

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

// making all uppercase
city.toUpperCase();

//removing spaces and making all lowercase
city = city.trim().toLowerCase();

//capitalizing the first letter
cityCapitalized = city.charAt(0).toUpperCase() + city.slice(1);

onClick={() => window.open(url, "_blank")}

import { useEffect } from 'react';

export const useClickOutside = (ref, setIsModalOpen) => {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsModalOpen(false)
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
};

array.sort((x, y) => +new Date(x.createdAt) - +new Date(y.createdAt));

// Get path to resource on disk
 const onDiskPath = vscode.Uri.file( 
   path.join(context.extensionPath, 'css', 'style.css')
);
// And get the special URI to use with the webview
const cssURI = panel.webview.asWebviewUri(onDiskPath);

const sessionMiddleware = expressSession({
    secret: 'Tecky Academy teaches typescript',
    resave:true,
    saveUninitialized:true,
    cookie:{secure:false}
});

app.use(sessionMiddleware);

io.use((socket,next)=>{
    let req = socket.request as express.Request
    let res = req.res as express.Response
    sessionMiddleware(req, res, next as express.NextFunction
});
//...
io.on('connection', function (socket) {
    // You can set any values you want to session here.
    const req = socket.request as express.Request;
    req.session['key'] = 'XXX';
    // There is no auto save for session.
    socket.request.session.save();

    // You can also send data using socket.emit() although it is not very useful
    socket.emit('any-key','values');
    socket.on("disconnect",()=>{
        //... rest of the code
    })
});

const range = (from, to, step) =>
  [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);

range(0, 9, 2);
//=> [0, 2, 4, 6, 8]

// can also assign range function as static method in Array class (but not recommended )
Array.range = (from, to, step) =>
  [...Array(Math.floor((to - from) / step) + 1)].map((_, i) => from + i * step);

Array.range(2, 10, 2);
//=> [2, 4, 6, 8, 10]

Array.range(0, 10, 1);
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.range(2, 10, -1);
//=> []

Array.range(3, 0, -1);
//=> [3, 2, 1, 0]

...

<ion-content class="scanner-hide" *ngIf="scanStatus == false">
  <div class="padding-container center">
    <ion-button color="primary" (click)="scanCode()"><ion-icon slot="start" name="qr-code-outline"></ion-icon> Scanear Código</ion-button> <!-- Botão que chama a função do scanner-->
  </div>
  <ion-card>
    <ion-card-content><h1>{{ result }}</h1></ion-card-content> <!-- mostra o resultado do scan -->
  </ion-card>
  
  <div class="scanner-ui"> <!-- Quando estamos a scanear, chama esta classe-->
    ...Scanner Interface
    </div>
    <div class="ad-spot"></div>
</ion-content>

// src/components/RadixSlider.jsx
import * as Slider from "@radix-ui/react-slider";
import { useState } from "react";

const RadixSlider = () => {
  const [values, setValues] = useState([20, 80]);
  console.log(values);
  return (
    <div className="bg-gray-200 ">
      <label
        htmlFor="slider"
        className="text-center text-sm font-medium text-gray-700"
      >
        range: {values.toString()}
      </label>
      <Slider.Root
        id="slider"
        className="outline outline-1 mx-auto relative flex items-center select-none touch-none w-[300px] h-5"
        defaultValue={values}
        // onValueChange={(values) => setValues(values)}
        onValueCommit={(values) => setValues(values)}
        max={100}
        step={1}
        minStepsBetweenThumbs={10}
      >
        <Slider.Track className="bg-blue-400 relative grow rounded-full h-[3px]">
          <Slider.Range className="absolute bg-red-400 rounded-full h-full" />
        </Slider.Track>
        <Slider.Thumb
          className="block bg-white shadow-[0_2px_10px] shadow-black rounded-full hover:bg-violet-300 focus:outline "
          aria-label="Volume"
          asChild
        >
          <p className=" px-1"> {values[0]}</p>
        </Slider.Thumb>
        <Slider.Thumb
          className="block   bg-white shadow-[0_2px_10px] shadow-black rounded-full hover:bg-violet-300 focus:outline "
          aria-label="Volume"
          asChild
        >
          <p className=" px-1"> {values[1]}</p>
        </Slider.Thumb>
      </Slider.Root>
    </div>
  );
};

export default RadixSlider;

// src/App.jsx
const App = () => (
  <div>

      <RadixSlider />
     
    </div>
  </div>
);

import {userRef,UseEffect} from "react"
function App()=>{
  const refOne = useRef(null);
  
  useEffect(() => {
    document.addEventListener("click", handleClickOutside, true);
  }, []);
  
  const handleClickOutside = (e) => {
    if (refOne.current && !refOne.current.contains(e.target)) {
      console.log("clicked outside");
    } else {
      console.log(`clicked inside div`);
    }
  };
 return(
 <div style={{width:"10rem",height:"10rem", backGround:"red"}}>
 </div>) 
}