angular封装slider滑动条组件（支持小数）

盼盼盼

于 2019-06-19 18:00:38 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 javascript angular

本文链接：https://blog.youkuaiyun.com/come0across/article/details/92839912

本文档将指导你如何在Angular项目中封装一个支持小数的slider滑动条组件。首先展示了滑动条的效果，然后通过angular命令创建组件，详细讲解了slider.component.ts、html和css的代码实现，最后说明了如何在项目中引用这个自定义组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.先展示滑动条效果

在这里插入图片描述

2.使用angular命令快速创建组件

ng g c component/slider

打开slider.component.ts文件，可以看到selector的值是app-steps

import {
   
    Component, OnInit} from '@angular/core';

@Component({
   
   
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {
   
   
  constructor() {
   
    }
  ngOnInit() {
   
    }
}

3.代码

slider.component.html

<div class="background">
    <div class="modal" #modal>
        <div class="header slider-item">
            <div class="icon-close"></div>
        </div>
        <div class="slider-view" style="width: 0px;">
        </div>
    </div>