Not showing the slider button

[danpalmieri]

Only the bar.

Browser: Chrome on Mac.

[oyepez003]

I'm not able to reproduce the issue at the moment. I use Linux and it works in Firefox and Chrome correctly.

Thanks again @danpalmieri .

[nea]

Ahoy

I am having the same issue:

If I add steps, I can see where I am. But no slider itself. No console.log errors or anything, and whatever I click on the bar is correctly set just not visible. I started pretty fresh with a new filament project.

Chrome Version 103.0.5060.53, Windows 10 Filament 2.13.12

Thanks a lot

[alexmartinfr]

I've the exact same issue with the following browsers on macOS 12.4:

• Chrome 103.0.5060.53
• Safari 15.5

Works on Firefox 101.0.1, almost, with a graphical glitch though:

[oyepez003]

Ok guys, let me check how can I fix the error in Mac. Thanks for your review.

[oddvalue]

Same issue here. On latest version of Laravel, Filament, and this package. Chrome on Linux (Pop!_OS 22.04 LTS). Any progress on fixing it?

[Quadrubo]

Same issue here, Brave on Linux, Firefox works but only displays the outline and not the fill.

[oyepez003]

It works on Linux: Brave, Firefox, and Chrome (all the latest versions).

Brave:

Firefox:

Chrome:

Not able to replicate in IOs yet.

[oddvalue]

@oyepez003 Am I missing something? Your screenshots don't actually show any range fields. It's just toggles and selects :thinking:

[oyepez003]

Sorry guys, you are right @oddvalue, next the screenshots:

Firefox:

Brave:

Chrome:

[bumbummen99]

@oyepez003 My filament app.css is not including all the tailwind classes you used in the component, your package does also not provide them. This might be simply an incompatibility between Filament CSS build and this package instead of the actual logic. I am using filament version v2.16.46

v2.16.46 app.css https://github.com/filamentphp/filament/blob/v2.16.46/packages/admin/dist/app.css Try to search for .focus\:bg-primary-200

[habib19]

I've the exact same issue with chrome browser.

[frode81]

Any update regarding this? I have the same issue.

[studiowizjo]

Same here. If you get rid of all classes from input, it displays default for browser, so point marking current value displays correctly. Hovewer it is not possible to move it: both clicking on range or on defined steps below. Steps are marking as selected, but range value indicator is not moving.

[elegisandi]

same here, ive found a way to show the slider thumb via the plugin CSS. just comment out the 2 lines below.

.filament-forms-range-component::-webkit-slider-thumb {
    /* -webkit-appearance: none; */
    /* appearance: none; */
   ....
}

NOTE: just make sure to publish the assets php artisan vendor:publish --tag="filament-range-field-assets"

[oddvalue]

Further to @elegisandi's comment; This issue is caused by the fact that the css uses custom properties that are not present in a default Filament install. e.g. var(--color-primary-600)

Presumably @oyepez003 is using the package in an app with a custom stylesheet.

My workaround has been to make my own stylesheet based on this https://github.com/yepsua/filament-range-field/blob/master/resources/css/filament-forms-range-component.css that actually works.

[naumantoor]

any one found this the fix for this issue ?

[danpalmieri]

@oddvalue is right. My fork is working with filament v3 and a hard coded color.

https://github.com/danpalmieri/filament-range-field

@oyepez003 can I make a PR?

[oyepez003]

Fixed by using the latest release: https://github.com/yepsua/filament-range-field/releases/tag/v0.3.4

[elegisandi]

for those still using filamentphp v2. add the ff lines at the top of the plugin's custom CSS file.

@layer base {
    :root {
        --color-primary-600: replace-with-your-own-color;
        --color-primary-400: replace-with-your-own-color;
        --color-primary-300: replace-with-your-own-color;
        /* ... */
    }
}

see https://tailwindcss.com/docs/customizing-colors#using-css-variables for reference.