Slider width not adjusting correctly

[hlesemann]

I am using the Slider in a simple Node module.

In most projects where I use the module, it works perfectly fine and looks like this.

In one project where the initialization is no different, it looks like this:

Any idea what causes this behavior?

This is the implementation in the node module:

`import MultiRangeSlider from "multi-range-slider-react";

function RangeSlider(props) {
const [minValue, setMinValue] = useState(0);
const [maxValue, setMaxValue] = useState(250);
const [minRange, setMinRange] = useState(0);
const [maxRange, setMaxRange] = useState(250);
useEffect(() => {
if (Array.isArray(availableTags) && availableTags.length > 0) {
const min = Math.min(...availableTags);
const max = Math.max(...availableTags);
setMinRange(min);
setMaxRange(max);
}
}, [availableTags]);

const handleInput = (e) => {
setBpmRange([e.minValue, e.maxValue]);
setMinValue(e.minValue);
setMaxValue(e.maxValue);
};
return (
<>
<MultiRangeSlider
min={minRange}
max={maxRange}
step={25}
labels={[0,25, 50, 75, 100, 125, 150, 175, 200, 225, 250]}
minValue={minValue}
maxValue={maxValue}
barLeftColor={theme.onBackgroundFixed}
barInnerColor={theme.onBackgroundFixed}
barRightColor={theme.onBackgroundFixed}
thumbLeftColor={theme.backgroundFixed}
thumbRightColor={theme.backgroundFixed}
onChange={handleInput}
style={{ width: "300px", boxShadow: "none", outline: "none" }}
/>
</>
);`