How to create range slider in angular 5 - angular5

Question

I tried ng2-ion-range-slider and ng2-nouislider using documentation described in github.
When i add these component it showing "it is not a known element of ngModule"
I import ng2-nouislider, ng2-ion-range-slider in my app module
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

Seems to be working fine in my case after installing the required dependencies, have a look at my working demo.
Don't forget to include NouisliderModule in the imports of your app.module, and #import "~nouislider/distribute/nouislider.min.css"; in your styles.css

Answer 2

giphy animated gif link
I have developed a range slider but it uses html css and angular (typescript). You may have to modify code slightly but it works by using a CSS circle, placing the number value at a position in that circle, and placing that over the input range.
html section
<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 section (In the angular component 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 section
.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;
}