Floor of the slider is equal to NaN after changing the state
DurgaChowdary opened this issue · 4 comments
DurgaChowdary commented
When the slider loads initially, floor and ceil are loading well. After we clear the value from the slider, the floor shows NaN.
Our code looks like this,
$scope.openSliderSelection = function (key, min, max) {
console.log("KEY", key);
var modalInstance = $uibModal.open({
templateUrl: adfTemplatePath + 'sliderPopup.html',
controllerAs: 'modal',
controller: function ($scope, $uibModalInstance) {
if (min == '' || min == null) {
min = 0;
}
//var modal = this;
$scope.slider = {
operator: (key["operator"] == null) ? "equal" : key["operator"],
equal: {
min: (key.operator == "equal") ? key.selectedList[0] : min
},
range: {
min: (key.operator == "range") ? key.selectedList[0] : min,
max: (key.operator == "range") ? key.selectedList[1] : max
},
greater: {
min: (key.operator=="greater")?key.selectedList[0]:min
},
lesser: {
min: (key.operator=="lesser")?key.selectedList[0]:min
}
};
if (key["operator"] == "equal" || typeof (key["operator"]) == "undefined") {
$scope.rangeSlider = false;
$scope.equalSlider = true;
$scope.greaterThanSlider = false;
$scope.lessThanSlider = false;
}
else if (key["operator"] == "range") {
$scope.rangeSlider = true;
$scope.equalSlider = false;
$scope.greaterThanSlider = false;
$scope.lessThanSlider = false;
}
else if(key["operator"] == "greater") {
$scope.rangeSlider = false;
$scope.equalSlider = false;
$scope.greaterThanSlider = true;
$scope.lessThanSlider = false;
}
else if(key["operator"] == "lesser") {
$scope.rangeSlider = false;
$scope.equalSlider = false;
$scope.greaterThanSlider = false;
$scope.lessThanSlider = true;
}
$scope.showEqualSlider = function () {
$scope.equalSlider = true;
$scope.rangeSlider = false;
$scope.greaterThanSlider = false;
$scope.lessThanSlider = false;
$scope.slider.operator = "equal";
}
$scope.showRangeSlider = function () {
$scope.rangeSlider = true;
$scope.equalSlider = false;
$scope.greaterThanSlider = false;
$scope.lessThanSlider = false;
$scope.slider.operator = "range";
}
$scope.showGreaterThanSlider = function () {
$scope.equalSlider = false;
$scope.rangeSlider = false;
$scope.greaterThanSlider = true;
$scope.lessThanSlider = false;
$scope.slider.operator = "greater";
}
$scope.showLessThanSlider = function () {
$scope.equalSlider = false;
$scope.rangeSlider = false;
$scope.greaterThanSlider = false;
$scope.lessThanSlider = true;
$scope.slider.operator = "lesser";
}
$scope.slider.equal.options = {
floor:min,
ceil: max,
showSelectionBar: true
};
$scope.slider.range.options = {
floor: min,
ceil: max,
showSelectionBar: true
};
$scope.slider.greater.options = {
floor: min,
ceil: max,
showSelectionBar: true
};
$scope.slider.lesser.options = {
floor: min,
ceil: max,
showSelectionBar: true
};
$scope.ok = function () {
key.selectedList = []
key["operator"] = $scope.slider.operator
if ($scope.slider.operator == "equal") {
key.selectedList.push($scope.slider.equal.min);
$scope.slider.range.min = min;
$scope.slider.range.max = max;
}
else if($scope.slider.operator == "greater")
{
key.selectedList.push($scope.slider.greater.min);
$scope.slider.range.min = min;
$scope.slider.range.max = max;
}
else if($scope.slider.operator == "lesser")
{
key.selectedList.push($scope.slider.lesser.min);
$scope.slider.range.min = min;
$scope.slider.range.max = max;
}
else {
key.selectedList.push($scope.slider.range.min);
key.selectedList.push($scope.slider.range.max);
$scope.slider.equal.min = min;
$scope.slider.equal.max = max;
}
$uibModalInstance.close(key.selectedList);
};
$scope.cancel = function () {
$uibModalInstance.dismiss();
};
},
resolve: {
}
});
modalInstance.result.then(function () {
$scope.selectedFilters = DataService.createFilterQuery($scope.filterValues);
widget.gridFilters = (Object.keys($scope.selectedFilters.dataFilters).length > 0) ? $scope.selectedFilters.dataFilters : "";
widget.paramValues = (Object.keys($scope.selectedFilters.apiFilters).length > 0) ? $scope.selectedFilters.apiFilters : "";
});
modalInstance.rendered.then(function () {
$timeout(function () {
$rootScope.$broadcast('rzSliderForceRender');
}, 25);
});
};
$scope.updateFilters = function (filterName, filterValue) {
$scope.clearFilter = false;
//var defaultObject = {};
angular.forEach($scope.filterValues, function (value, key) {
if (value.filterName == filterName) {
//var defaultValue = value.defaultValues;
if (value.type == "range") {
$scope.filterValues[key]["selectedList"] = [];
}
On save, the selected value gets added to the selectedList. And we have a clear function that clears the selectedList. After clear, the slider's floor is shown as NaN.
brownrw8 commented
Second this issue
Nojil commented
im seeing the same issue, my rzslider it attached to an input box, the floor is set to 0, if the end user deleted the 0 the rzslider floor displays NaN or undefined. Also if the user trys to drag the slider further left then 0 it shows undefined.
ValentinH commented
Please provide a minimal reproduction example showing the issue. I'm not going to try to understand this huge function 🙂
ValentinH commented
Closing as there was no answer for a while. Comment to re-open 😉