时间戳

首页 > 解决方案 > How to make this bar

javascript - How to make this bar

问题描述

I am creating a resume with angular and am looking for something that can visually quantify my level of skill with certain subjects. I like this here:

slider barr??

The problem I am having is I am not sure what I need to google so I can research what I need. The closest thing I could find to this is called a slider bar. My alternative solution was also to use a rating scale, although I do not like the separated stars going this route. I would prefer a solid line like the pic.

标签： javascriptangular

解决方案

我会尝试使用自定义指令来解决您的问题。现在我假设您使用的是@angular，因为您没有指定，但逻辑对所有版本都是可行的。

首先，设置您的假 div 滑块模板 (@Component)，如下所示：

<div class="skill-slider">
  <div class="skill-level" [ngClass]="{low: isLow, med: isMed, high: isHigh}">      
  </div>
</div

然后你的css可以对应你的变量。因此，您可能需要创建更多变量：

    .skill-slider{
  width: 100px;
  border-radius: 30px;
  height: 5px;
  background-color: black;
}

.skill-level{
  height: 15px;
  width: 15px;
  border-radius: 20px;
  background-color: #4523EF;
  position: absolute;
  left: 0px;
  top: 3px;
}

.low{
  left: 20px
}

.med{
  left: 50px;
}

.high{
  left: 90px;
}

然后在你的控制器中设置变量

...
isMed = true;
isLow = false;
isHigh = false;
...

您对应的类应该会生效，并且滑块会相应地移动。祝你好运！

这是一个你可以玩的小提琴。https://jsfiddle.net/d1mfua3r/

推荐阅读