Below is the code that I am using to display sliders on the client side (number of sliders obtained from backed).
It takes about 2 sec to obtain slider objects from the backend and about 8 more seconds to display the slider elements on the client side.
Could someone please advise me on how to optimise this to keep it with 1 second or lower. Below is my code.
Below is code in html
(Slider reference: ya-no-ui-slider)
<div ng-repeat="(sliderName, commonOptions) in sliders " style="display: flex; align-items: center;" class='col-xs-2'>
<div class="vertical-slider " ya-no-ui-slider="commonOptions">
</div>
</div>
Below is my angular js code
$scope.sliders = {}
var commonOptionsSliders ={
'slider1':{
start: 0,
step: 1,
margin: 20,
direction: 'rtl',
orientation: 'vertical',
range: {'min': 0, 'max': 100},
tooltips: true
},
'slider2':{
start: 0,
step: 1,
margin: 20,
direction: 'rtl',
orientation: 'vertical',
range: {'min': 0, 'max': 100},
tooltips: true
}
}
// Obtaining slider objects from firebase to display on client
var slidersRef = firebase.database().ref('slidersDetails');
$scope.obtainsliders = function(){
slidersRef.once('value').then(function(dataSnapshot) { // Once the value is obtained from dB execute the below code
var sliderObjects = dataSnapshot.val();
if(Object.getOwnPropertyNames(sliderObjects).length !== 0 ){ // Checking if sliderObjects is empty
for (key in sliderObjects){ // Iterating through sliderObjects
var sliderObject = sliderObjects[key];
for (key in sliderObject){
var sliderDetailsObject = sliderObject[key];
var sliderName = sliderDetailsObject['sliderName'];
$scope.sliders[sliderName] = commonOptionsSliders[sliderName]; // Assingning options to the relavent sliders
}
}
}
});
}
$scope.obtainsliders();
