flowbase-range-slider.css

<!-- Custom Range Slider for Webflow (Flowbase.co) -->

<link href="https://refreshless.com//nouislider/dist/nouislider.css?v=1550" rel="stylesheet">
<style>
    /* Here you can change the root styles to suit your own brand */
    :root {
        --tooltip-height: 32px;
        --tooltip-color: #000;
        --tooltip-bg-color: #FBFCFE;
        --tooltip-border-color: #E4E6F1;
        --tooltip-corner-radius: 8px;
        --tooltip-box-shadow: 0px 8px 20px rgba(141, 155, 190, 0.16);

        --handle-height: 24px;
        --handle-width: 24px;
        --handle-box-shadow: 0px 8px 20px rgba(141, 155, 190, 0.16);
        --handle-color: #fff;

        --range-bar-height: 18px;
        --range-bar-corner-radius: 20px;
        --range-bar-color: #642EFF;
        --range-box-shadow: 0px 8px 20px rgba(141, 155, 190, 0.16);
    }
    
 /* -150% will show tool-tips at the bottom, you can swap these to top via the % amount. */
		.noUi-tooltip.bottom {
    	bottom: -150%;
    }
 /* These are some styles for the range bar, for example the 2px inner-shadow. Or the corner ends */
    .noUi-target {
        background: #E4E6F1;
        border-radius: 32px;
        border: 0;
				box-shadow: 0px 3px 2px -2px #1B114A14 inset;
    }
		.noUi-connects{
      	overflow: initial;
  	}
    .noUi-connect {
        background: var(--range-bar-color);
        box-shadow: var(--range-box-shadow);
    }

    .noUi-handle {
        width: var(--handle-width) !important;
        height: var(--handle-height) !important;
        border-radius: 50%;
        border: 0;
        box-shadow: none;
        box-shadow: var(--handle-box-shadow);
        cursor: pointer;
        top: -3px !important;
        background: var(--handle-color);
    }
    
    .noUi-handle:before,
    .noUi-handle:after {
        display: none
    }
    .noUi-horizontal{
        height: var(--range-bar-height);
    }
    .noUi-tooltip {
        height: var(--tooltip-height);
        background: var(--tooltip-bg-color);
        border: 1px solid var(--tooltip-border-color);
        box-sizing: border-box;
        box-shadow: var(--tooltip-box-shadow);
        border-radius: var(--tooltip-corner-radius);
    }
</style>