如何在 angular 5 中创建范围滑块

Question

我使用 github 中描述的文档尝试了 ng2-ion-range-slider 和 ng2-nouislider。当我添加这些组件时，它显示 "it is not a known element of ngModule" 我在我的应用程序模块中导入 ng2-nouislider、ng2-ion-range-slider

APP MODULE

import 'hammerjs';
import {SharedModule} from './core/modules/shared.module';
import {AppComponent} from './app.component';
import {VoifinityMainModule} from './main/main.module';
import {FuseSplashScreenService} from './core/services/splash-screen.service';
import {VoifinityConfigService} from './core/services/config.service';
import {FuseNavigationService} from './core/components/navigation/navigation.service';
import {AppRoutingModule} from './app-routing.module';
import {AuthenticationModule} from './authentication/authentication.module';
import {VoifinityAuthInterceptor} from './core/auth/voifinity-auth.interceptor';
import {AuthService} from './core/auth/auth.service';
import {AuthGuardService} from './core/auth/auth-guard.service';
import {SimpleNotificationsModule} from 'angular2-notifications';
import {AppService} from './app.service';
import {NgHttpLoaderModule} from 'ng-http-loader/ng-http-loader.module';
import {IonRangeSliderModule} from 'ng2-ion-range-slider';


@NgModule({
    declarations: [
        AppComponent
    ],
    imports     : [
        BrowserModule,
        HttpClientModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        SharedModule,
        SimpleNotificationsModule.forRoot(),
        AuthenticationModule,
        VoifinityMainModule,
        NgHttpLoaderModule,
        IonRangeSliderModule
    ],
    providers   : [
      AuthService,
      AppService,
      AuthGuardService,
      {
        provide: HTTP_INTERCEPTORS,
        useClass: VoifinityAuthInterceptor,
        multi: true
      },
        FuseSplashScreenService,
        VoifinityConfigService,
        FuseNavigationService
    ],
    bootstrap   : [
        AppComponent
    ]
})
export class AppModule
{
}

app.component.html, added ion-range slider component. but it shows template parse error. ion-range-slider is not a known element

<ion-range-slider #sliderElement
          type="double"
          [min]="myMinVar"
          max="100"
          from="28"
          from_min="10"
          from_max="30"
          from_shadow="true"
          to="40"
          to_min="40"
          to_max="90"
          to_shadow="true"
          grid="true"
          grid_num="10"
          prefix="Weight: "
          postfix=" million pounds"
          decorate_both="false"
          (onUpdate)="myOnUpdate($event)"
          (onChange)="myOnChange($event)"
          (onFinish)="myOnFinish($event)"></ion-range-slider>

Answer 1

在我的情况下安装所需的依赖项后似乎工作正常，看看我的 working demo。

不要忘记在 app.module 的导入中包含 NouisliderModule，在 styles.css

中包含 @import "~nouislider/distribute/nouislider.min.css";

Answer 2

giphy animated gif link

我开发了一个范围滑块，但它使用 html css 和 angular（打字稿）。您可能需要稍微修改代码，但它的工作原理是使用 CSS 圆圈，将数字值放在该圆圈中的某个位置，然后将其放在输入范围内。

html节

<div class="row small-margin"><div class="col-lg-8 small-padding">
<div class="form-group has-success">
  <label>Credit Score</label>
  <br />
  <div class="ui medium-padding">
    <div class="slidecontainer">
      <input #creditSlider (input)="updateCreditSlider()"  (change)="updateCreditSlider()" type="range" min="300" max="850" value="{{ creditSliderValue }}" class="slider" id="myRange">
    </div>
  </div>
  <div #creditSliderSpan class="sliderValue circle" >
    <span class="noselect">{{ creditSliderValue }}</span>
  </div>
  <div #creditSliderTrack class="sliderTrack" ></div>
</div>

typescript 部分（在 angular 组件 class 中）

creditSliderValue : any;
@ViewChild('creditSlider') creditSlider;
@ViewChild('creditSliderSpan') creditSliderSpan;
.
.
.
updateCreditSlider() {
      let horizontalOffset:number = 0;
      //values from 300 to 850 - Next value needs to be adjusted based on your placement of slider object
      horizontalOffset =  ( (Number.parseInt(this.creditSlider.nativeElement.value )- 280)/2.45);
      this.creditSliderSpan.nativeElement.style.left = ( horizontalOffset )+ 'px';
      this.creditSliderSpan.nativeElement.style.top = this.creditSliderSpan.nativeElement.style.top  + 'px';
      this.creditSliderValue = this.creditSlider.nativeElement.value;
    }

css节

.smallPadding {
  margin-bottom: 0px;
  padding: 4px;
}

.slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    position: relative;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width:275px;
    //width: 100%; /* Full-width */
    height: 15px;
    border-radius: 5px;
    //background: #d3d3d3; /* Grey background */
    background: rgba(211,211,211, 0.00);

    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    z-index: 20;
}

/* Mouse-over effects */
.slider:hover {
    //opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 50px; /* Set a specific slider handle width */
    height: 50px;
    border-radius: 50%;
    border-style: none;
    //background: #4CAF50; /* Green background */
    background: rgba(76,175,80, 0.00);
    cursor: pointer; /* Cursor on hover */

}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px;
    border-radius: 50%;
    border-style: none;
    //background: #4CAF50; /* Green background */
    background: rgba(76,175,80, 0.00);
    cursor: pointer; /* Cursor on hover */

}

.sliderValue {
    position: absolute;
    top: 25px;
    left: 0px;
    width: 100%; /* Width of the outside container */
    z-index: 15;

}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

@media screen and (max-width: 992px) {

}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 14pt;
  color: black;
  line-height: 46px;
  text-align: center;
  background: white;
  vertical-align: center;
  //display: table-cell;
  border-style: solid;
  border-color: #7E7E7E;
}

.medium-padding {
  padding-top: 14px;
  padding-bottom: 14px;
}
.sliderTrack {
  position: relative;
  width: 220px;
  height: 10px;
  background-color: #E0E1E2;
  vertical-align: center;
  border-radius: 5px;
  top: -35px;
  left: 25px;
  //display: table-cell;
  //border-style: solid;
  //border-color: #7E7E7E;
}
.left-padding {
  padding-left: 14px;

}

.small-margin {
  margin-left: 4px;
}
.medium-margin {
  margin-left: 10px;
}
.small-padding{
  padding: 4px;
}

如何在 angular 5 中创建范围滑块

How to create range slider in angular 5

angular5

rangeslider