Search code examples
jquerycssround-slider

how to style roundSlider to have an inside circle and shadow

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

Dashboard

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.

Solution

  • 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:

    1. 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

    1. 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