Cute Bubble Sliders

Here’s a recipe with the style taken directly from one of my most popular CodePens.

Most of the work is using the CSS variables to control the colors. With a little bit of CSS to control the rangeNub, rsPip, and rangeFloat position.

Cute Bubble Sliders
15 35
10
15
20

Check out the CSS tab, below, for the full CSS code.

<script>
  let sliderValues = [15, 35];
  let max = 50;
</script>

<div id="cute-sliders">
  <RangeSlider class="cute" range bind:values={sliderValues} pips pipstep={1} {max} float />
  
  <div class="flex">
    <RangeSlider class="cute" value={10} pips pipstep={1} max={30} vertical float range="min" />
    <RangeSlider class="cute" value={15} pips pipstep={1} max={30} vertical float />
    <RangeSlider class="cute" value={20} pips pipstep={1} max={30} vertical float range="max" />
  </div>
</div>