Hello,
I have problem with integrating ion.RangeSlider plugin in my SPA:
Added to ScriptPaths.cs public const string Ion_RangeSlider = "~/libs/ion-rangeslider/js/ion.rangeSlider.js";
Added to StylePaths.cs public const string Ion_RangeSlider = "~/libs/ion-rangeslider/css/ion.rangeSlider.Metronic.css"; public const string Ion_RangeSlider_Nice = "~/libs/ion-rangeslider/css/ion.rangeSlider.skinNice. public const string Ion_RangeSlider_Norm = "~/libs/ion-rangeslider/css/normalize.css";
Added to AppBundleConfig.cs ScriptPaths.Ion_RangeSlider -> ScriptBundle .Include(StylePaths.Ion_RangeSlider_Norm)->StyleBundle .Include(StylePaths.Ion_RangeSlider)->StyleBundle .Include(StylePaths.Ion_RangeSlider_Nice)->StyleBundle
Added in createOrEditModl.js function ($scope, $uibModalInstance, storeService, storeGroupService, storeId) { var vm = this; var range = $("#range_id"); ... function init() { vm.getStoreForEdit(); vm.getStoreGroups();
range.ionRangeSlider({});Added in createOrEditModal.cshtml <input type="text" id="range_id" value="" name="range" />
As a result - it doesn't work. On the form I have standard imput field. Please help me)
3 Answer(s)
-
0
Could you help me?
-
0
Hi,
I didn't use this plugin before but as I checked from metronic sample page, you should use these css files.
public const string Ion_RangeSlider = "~/libs/ion-rangeslider/css/ion.rangeSlider.css"; public const string Ion_RangeSlider_Nice = "~/libs/ion-rangeslider/css/ion.rangeSlider.skinNice.css";
You can change "ion.rangeSlider.skinNice.css" to any other css file like skinFlat or skinModern but ion.rangeSlider.css must be used.
Then, in the modal dialog you just need to inject $timeout
'$scope', '$uibModalInstance', '$timeout', ....., function ($scope, $uibModalInstance, $timeout, ...) {Then, in the init function, run your ion slider code like this,
$timeout(function () { $("#range_id").ionRangeSlider(); }, 0);Since you are running jquery code in angular, you just need to wait a little to catch the dom object.
I hope this helps,
-
0
Thank you! It helped.
