如何设置 roundSlider 的样式以具有内圆和阴影

Question

我想将我的 roundSlider 设计成图中这样的样式：

我已经阅读了圆形滑块 https://roundsliderui.com/document.html 的文档，但由于我对 CSS.

的有限了解，我无法像上图那样设置它的样式

这是我目前得到的代码：

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
});

此外，我的问题是我无法将其设置为在放置在 boostrap 卡中时正常运行。它最下面的部分是指出来的，像这样：https://ibb.co/26xCBrp.

我还用上面的代码准备了一个小jsfiddle：JSFiddle。

Answer 1

你可以试试这个：

.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;
}

您需要添加一些 css 以将文本定位在中间。您可能需要使用“!important”来设置 css.

的优先级

Answer 2

在htmlcss中有多种方法可以做到这一点，这里我用了一种最简单的方法。检查下面的演示，了解内圆阴影行为和指出问题的底部三角形：

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;
}

建议:

在fiddle您使用的是roundSlider 1.0版本，为了更好的稳定性，建议您在应用中使用1.3.3版本。

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

如果您不需要工具提示的可编辑功能，那么您可以简单地使用工具提示格式自定义工具提示。当文本是动态的时，这将很有用。基于此检查以下演示：

Demo with tooltip formatting

如何设置 roundSlider 的样式以具有内圆和阴影

how to style roundSlider to have an inside circle and shadow

css

jquery

round-slider

Demo