Can't create a slider (<rzslider>) in the UI - html

Question

Is this code is correct to run ? because i have a question that is tag will execute without any built in libraries of
can this <rzslider> tag run directly in the page without any built-in packages of <rzslider>
running it using linux server.
<rzslider rz-slider-model="slider.minValue"
rz-slider-high="slider.maxValue"
rz-slider-options="slider.options"></rzslider>
$scope.slider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1
}
};
using this tags i can't able to create a slider in the UI. so how can i execute it to show the slider in the UI?

Answer 1

You should try like as below
In view
<rzslider rz-slider-model="slider.value"
rz-slider-options="slider.options">
</rzslider>
In controller
$scope.slider = {
value: 10,
options: {
floor: 7,
ceil: 10,
showTicks: true,
showSelectionBar: true,
hidePointerLabels: true,
hideLimitLabels: true,
showTicksValues: false,
readOnly: true,
getTickColor: function (value) {
if (value < 3)
return 'red';
if (value < 6)
return 'orange';
if (value < 9)
return 'yellow';
return '#2AE02A';
}
},
}
Make sure you have add rzSlider module in your app.js