Range handle doesn't appear #1888
Description
Description
The <Range /> element correctly updates the value when using bind:value, but the handle (and the filled bar to the left of it) doesn't display.
Minimal Reproduction
// Runes mode is enabled, as I'm using Svelte 5 with runes.
<svelte:options runes />
<svelte:head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
--color-primary-50: #fff5f2;
--color-primary-100: #fff1ee;
--color-primary-200: #ffe4de;
--color-primary-300: #ffd5cc;
--color-primary-400: #ffbcad;
--color-primary-500: #fe795d;
--color-primary-600: #ef562f;
--color-primary-700: #eb4f27;
--color-primary-800: #cc4522;
--color-primary-900: #a5371b;
}
</style>
</svelte:head>
<script>
import { Button, Alert, Heading } from 'flowbite-svelte'
let value = $state(2);
</script>
<div class="p-8">
<Range id="demo-range" bind:value={value} />
<p>Selected value: {value}</p>
</div>Steps to Reproduce
- Install flowbite-svelte@latest
- Use a default element
- Click within the range's bar, watch the value update, but with no handle
- tested with Firefox and Safari
Environment
System:
OS: macOS 15.7.1
CPU: (8) arm64 Apple M1
Memory: 135.19 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 25.2.1 - /opt/homebrew/bin/node
npm: 11.6.2 - /opt/homebrew/bin/npm
Deno: 2.6.0 - /opt/homebrew/bin/deno
Browsers:
Firefox: 146.0
Firefox Developer Edition: 138.0
Safari: 26.0.1
npmPackages:
@sveltejs/kit: ^2.47.1 => 2.49.2
flowbite: ^4.0.1 => 4.0.1
flowbite-svelte: ^1.28.1 => 1.31.0
svelte: ^5.41.0 => 5.46.0
vite: ^7.1.10 => 7.3.0Relevant Logs / Console Output
Screenshots / GIF (optional)
Screen.Recording.2025-12-20.at.10.36.41.PM.mov
Additional Context (optional)
The environment shows Deno as installed, but I am using Node with this project.
Checklist
- I have searched existing issues and discussions
- I have provided a minimal and runnable reproduction
- I am using the latest version of Flowbite-Svelte