how to style roundSlider to have an inside circle and shadow

Question

how to style roundSlider to have an inside circle and shadow

1.7k Views Asked by johndoe At 13 April 2025 at 01:42

I want to style my roundSlider something like this one in the picture:

I've gone through documentation for round slider https://roundsliderui.com/document.html , but I am not able to style it like in the above picture, since my limiting knowledge of CSS.

Here is the code I've got so far:

HTML:

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css">

<body>
  <div class="container">
    <div id="thermostatSlider"></div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" charset="utf-8">

</body>

CSS:

 .rs-range-color {
   background-color: #33B5E5;
 }

 .rs-path-color {
   background-color: #C2E9F7;
 }

 .rs-handle {
   background-color: #C2E9F7;
   padding: 7px;
   border: 2px solid #C2E9F7;
 }

 .rs-handle.rs-focus {
   border-color: #33B5E5;
 }

 .rs-handle:after {
   border-color: #33B5E5;
   background-color: #33B5E5;
 }

 .rs-border {
   border-color: transparent;
 }

 .rs-tooltip-text {
   font-family: Roboto, sans-serif;
   font-size: 30px;
   border-radius: 7px;
   transition: background 0.02s ease-in-out;
   color: #33B5E5;
 }

 .rs-tooltip-text:before {
   position: absolute;
   left: 3px;
   top: -15px;
   content: 'COOLING';
   font-size: 12px;
 }

 .rs-tooltip-text:after {
   position: absolute;
   left: 19px;
   top: 48px;
   content: '19';
   font-size: 12px;
 }


.container{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Roboto, sans-serif;
}

JS:

$("#thermostatSlider").roundSlider({
    radius: 80,
    width: 8,
    min: 15,
    max: 75,
    handleSize: "+16",
    circleShape: "pie",
    handleShape: "dot",
    sliderType: "min-range",
    startAngle: 315,
    value: 24,
    disabled: false
});

Also, my problem is that I cannot set it to behave properly when placed inside a boostrap card. It's down-most part is pointing out, like this: https://ibb.co/26xCBrp.

I have also prepared a small jsfiddle with the above code: JSFiddle.

Original Q&A

There are 2 best solutions below

Abhijit Sil On 30 December 2019 at 00:09

you can try this:

.full .rs-tooltip {
   top: 10px;
   left: 10px;
   width: calc(100% - 20px);
   height: calc(100% - 20px);
   border-radius: 100%;
   box-shadow: 0 0 7px #aaa;
   margin-top: 0;
   margin-left: 0;
}

You need add some css for positioning the text in middle. You may need to use "!important" to set priority of your css.

**Soundar** · Accepted Answer

There are multiple ways to do this in html css, here I have done with a simplest way. Check the below demo for the inner circle shadow behaviour and bottom triangle pointing out issue:

Demo

/* Solution for inner circle with shadow */

#thermostatSlider:after {
  content: " ";
  display: block;
  height: calc(100% - 40px); /* here 40 is the gap between the outer and inner circle */
  width: calc(100% - 40px);
  position: absolute;
  top: 20px;  /* divide the gap value by 2 */
  left: 20px;
  z-index: 9; /* tooltip z-index is 10, so we put less than that value */
  border-radius: 1000px;
  box-shadow: 0 0 10px -2px;
}


/* Solution for bottom triangle out issue */

#thermostatSlider .rs-overlay {
    height: calc(50% + 5px);
    width: calc(50% + 5px);
    top: -5px;
    left: -5px;
    border-radius: 1000px 0 0 0;
}

Suggestion:

In the fiddle you are using the roundSlider 1.0 version, I suggest you to use the 1.3.3 version in your application for the better stability.

https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.css https://cdnjs.cloudflare.com/ajax/libs/roundSlider/1.3.3/roundslider.min.js

In case, if you don't need the tooltip editable functionality then you can simply customize the tooltip with tooltip formatting. This will be useful when the texts are dynamic. Check the below demo based on that:

Demo with tooltip formatting

how to style roundSlider to have an inside circle and shadow

There are 2 best solutions below

Demo

Related Questions in JQUERY

Related Questions in CSS

Related Questions in ROUND-SLIDER

Trending Questions

Popular # Hahtags

Popular Questions