Prometheus Prometheus - 5 months ago 51
AngularJS Question

When using drop down menu with range-slider, the range slider is not updated immediately

In a project, I need to use drop down menu with slider. I implemented a list into a drop down menu and in that list I have the speakers. Below that drop down menu, I have a slider that shows the volumes of the selected speaker. When I used more than one speaker in my computer and when I changed the item that is in the drop down menu, the slider is not updating itself immediately.

To give an example, assume that I have Speaker 1 and Speaker 2. Speaker 1's volume is 50, and Speaker 2's volume is 80. So when Speaker one selected, I am able to see the slider is on 50, but when I changed the drop down menu item to Speaker 2, the slider needs to change itself as 80 (because all of the speakers needs to have on their own speaker volumes), but it isn't.

Below is my code that I am working on.

<div class="setting-column">
<div class="name-container">{{languageData.SETTINGS.DEVICE_SETTINGS.ALERT_SPEAKER_SOURCE}}</div>
<button ng-show="speakerList.length > 0" data-dropdown="alertSpeakerSelectDropdown" aria-controls="alertSpeakerSelectDropdown" aria-expanded="false" class="sort-dropdown small radius button dropdown expand">{{selectedAlertSpeaker}}
<div class="sort-dropdown-triangle"></div>
</button>

<ul id="alertSpeakerSelectDropdown" data-dropdown-content class="f-dropdown settings-dropdown" aria-hidden="true">
<li ng-repeat="speaker in speakerList">
<a class="dropdown-menu" ng-click="selectAlertSpeaker(speaker)">{{speaker.name}}</a>
</li>
</ul>
<div ng-hide="speakerList.length > 0" class="lightbox-validation-error-column">
<small class="settings-error">
<div class="icon-warning"></div>
<p>{{languageData.SETTINGS.DEVICE_SETTINGS.SPEAKER_ERROR}}</p>
</small>
</div>
</div>
<div class="setting-column" ng-class="{'disabled': speakerList.length <= 0}">
<div class="name-container sensitivity-title">{{languageData.SETTINGS.DEVICE_SETTINGS.SPEAKER_VOLUME}}</div>
<div class="setting-selector large-10 columns rangeMoveTop">
<div range-slider class="sensitivity-range short" min="0" max="100" model-min="0" model-max="alertSpeakerVolume" pin-handle="min" disabled="false">
</div>
</div>
</div>


I also have my javascript code, but apparently it is working correctly. The values are right and I believe no need to tamper with it. But If you need it, I can provide it too.

So my question is, how can I update immediately my slider when I changed the value that is located in the drop down menu?

Any help will be greatly appreciated.

EDIT 1 after getting Lex's comment:

$scope.selectAlertSpeaker = function(speaker) {
deviceSettingsService.setSelectedDevice(speaker.name, deviceTypes.ALERT_SPEAKER).then(function() {
$scope.selectedAlertSpeaker = speaker.name;
}, function() {
$scope.displaySystemError();
});
};





function applyAlertSpeakerVolume(){
if(alertSpeakerData.displaySystemError === true){
$scope.selectedAlertSpeaker = '';
$scope.alertSpeakerVolume = 50;
$scope.prevAlertSpeakerVolume = 50;
$scope.displaySystemError();
}
else {
$scope.selectedAlertSpeaker = alertSpeakerData.selectedAlertSpeaker;
$scope.prevAlertSpeaker = alertSpeakerData.prevAlertSpeaker;
$scope.alertSpeakerVolume = alertSpeakerData.alertSpeakerVolume;
$scope.prevAlertSpeakerVolume = alertSpeakerData.prevAlertSpeakerVolume;
}
}

Answer

applyAlertSpeakerVolume is called in below line as model-max:

<div range-slider class="sensitivity-range short" min="0" max="100" model-min="0" model-max="alertSpeakerVolume" pin-handle="min" disabled="false">
</div>

And I realized that no need to understand alertSpeakerData's assign process. Because it is working correctly. The slider is not updating itself immediately, the problem is this. So I updated selectAlertSpeaker function with implementing a function that works for having the speaker volume here too. Whenever a speaker selected, it is also re-setting the volume of that speaker too. It is working now.

Comments