1

我想在图片中设置我的 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。

4

2 回答 2

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 的优先级。

于 2019-12-30T00:09:17.307 回答
1

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

演示

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

建议：

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

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

    带有工具提示格式的演示

于 2019-12-30T21:11:37.497 回答