Kevin Powell - Community•2y ago

i want to change the style of slider like the slider in the link https://aleksfedotov.github.io/pass

i want to change the style of slider like the slider in the link https://aleksfedotov.github.io/pass with tailwindcss

12 Replies

Mannix•2y ago

404 There isn't a GitHub Pages site here.

indeeOP•2y ago

https://aleksfedotov.github.io/password-generator/

React Password Generator

Web site created using create-react-app

Mannix•2y ago

from what i can see this can't be done with purely css/tailwind

indeeOP•2y ago

then how ?

Mannix•2y ago

you gonna need js for the green track part for that track they use js to set a gradient also it's broken in firefox

indeeOP•2y ago

is there any way of using css and import it with tailwind

Mannix•2y ago

what do you mean?? Just create a css file and link it in the html ???

indeeOP•2y ago

no no i mean @apply or something

Mannix•2y ago

extending ?

indeeOP•2y ago

briancross•2y ago

Here’s a CSS Tricks article about styling range inputs (sliders). It be used it and it works. Not tailwind but just create a CSS file and link it in the head.

indeeOP•17mo ago

hey guys ig i found the trick to solve my problem

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 15rem;
  }
  .slider::-webkit-slider-runnable-track {
    background: #053a5f;
    height: 0.5rem;
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -12px; /* Centers thumb on the track */
    background-color: #5cd5eb;
    height: 2rem;
    width: 2rem;
    border-radius: 50px;
  }
  .slider::-webkit-slider-thumb:hover {
    background-color: white;
  }
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 15rem;
  }
  .slider::-webkit-slider-runnable-track {
    background: #053a5f;
    height: 0.5rem;
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -12px; /* Centers thumb on the track */
    background-color: #5cd5eb;
    height: 2rem;
    width: 2rem;
    border-radius: 50px;
  }
  .slider::-webkit-slider-thumb:hover {
    background-color: white;
  }
}

Gaming

Programming

i want to change the style of slider like the slider in the link https://aleksfedotov.github.io/pass