0

I have a Range slider component and I want it to fill the line with color as you move the dot along the range slider. I read the documentation here, but didn't find anything helpful. I was also looking into the text moving with the dot right under it rather than just static text. Anyone know if this is possible with Flowbite and Tailwind?

The component:

const RangeSlider = (props) => {
  const { min, max, value, step, onChange, className } = props;

  return (
    <input
      type="range"
      value={value}
      min={min}
      max={max}
      step={step}
      onChange={onChange}
      className={`transparent h-2 w-full cursor-pointer appearance-none rounded-lg border-transparent accent-green-700 hover:accent-green-700 active:accent-green-800 bg-gray-100 ${className}`}
    />
  );
};

export default RangeSlider;

This is the code on the page:

<RangeSlider min={5} max={500} value={rangeSliderValue} onChange={handleRangeSlider} />
        <div className="flex justify-center">
          <p className="pl-4 text-center text-sm font-medium">
            {parseInt(rangeSliderValue, 10) === 5 ? 'minimum of ' : ''} {rangeSliderValue} Vehicles
          </p>
</div>

Here's how the code renders: rendering

Here's an image mocked up of what I want it to look like, but doesn't look like I can even do a border on an accent element with tailwind.

example

Lindsey Drennan
  • 13
  • 7
  • 1
    Does this answer your question? [How to change color of input range slider with tailwind css?](https://stackoverflow.com/questions/74648250/how-to-change-color-of-input-range-slider-with-tailwind-css) – pilchard Aug 28 '23 at 22:10
  • and a [css-tricks](https://css-tricks.com/almanac/properties/a/accent-color/#aa-it-works-with-specific-form-controls) explanation of accent color – pilchard Aug 28 '23 at 22:12
  • @pilchard neither of those help. I already have accent-green-700 as you see in the above code and it only applied it to the dot, but does not fill the line as it goes. Attached a picture of how it's rendering in the OP. – Lindsey Drennan Aug 28 '23 at 22:27
  • You have 'appearance-none' on it. – pilchard Aug 28 '23 at 22:35
  • If you are going to go that route you'll need to style the slider manually, see: [How to style HTML5 range input to have different color before and after slider?](https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider). To take advantage of `accent-color` you need to remove 'appearance-none', [playground](https://play.tailwindcss.com/wmezCIyjh7) – pilchard Aug 28 '23 at 22:45
  • 1
    @pilchard went down a rabbit hole with those links and [found this builder](https://toughengineer.github.io/demo/slider-styler/slider-styler.html#explanation) that worked great! – Lindsey Drennan Aug 29 '23 at 21:19

0 Answers0