\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/rangetype.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/rangetype.prevalues.html
deleted file mode 100644
index 3407f6ba6b..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/rangetype.prevalues.html
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js
new file mode 100644
index 0000000000..effecb07ff
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js
@@ -0,0 +1,107 @@
+function sliderController($scope, $log, $element, assetsService, angularHelper) {
+
+ //configure some defaults
+ if (!$scope.model.config.orientation) {
+ $scope.model.config.orientation = "horizontal";
+ }
+ if (!$scope.model.config.initVal1) {
+ $scope.model.config.initVal1 = 0;
+ }
+ else {
+ $scope.model.config.initVal1 = parseFloat($scope.model.config.initVal1);
+ }
+ if (!$scope.model.config.initVal2) {
+ $scope.model.config.initVal2 = 0;
+ }
+ else {
+ $scope.model.config.initVal2 = parseFloat($scope.model.config.initVal2);
+ }
+ if (!$scope.model.config.minVal) {
+ $scope.model.config.minVal = 0;
+ }
+ else {
+ $scope.model.config.minVal = parseFloat($scope.model.config.minVal);
+ }
+ if (!$scope.model.config.maxVal) {
+ $scope.model.config.maxVal = 100;
+ }
+ else {
+ $scope.model.config.maxVal = parseFloat($scope.model.config.maxVal);
+ }
+ if (!$scope.model.config.step) {
+ $scope.model.config.step = 1;
+ }
+ else {
+ $scope.model.config.step = parseFloat($scope.model.config.step);
+ }
+
+ /** This creates the slider with the model values - it's called on startup and if the model value changes */
+ function createSlider() {
+
+ //the value that we'll give the slider - if it's a range, we store our value as a comma seperated val but this slider expects an array
+ var sliderVal = null;
+
+ //configure the model value based on if range is enabled or not
+ if ($scope.model.config.enableRange === "1") {
+ //If no value saved yet - then use default value
+ if (!$scope.model.value) {
+ var i1 = parseFloat($scope.model.config.initVal1);
+ var i2 = parseFloat($scope.model.config.initVal2);
+ sliderVal = [
+ isNaN(i1) ? $scope.model.config.minVal : (i1 >= $scope.model.config.minVal ? i1 : $scope.model.config.minVal),
+ isNaN(i2) ? $scope.model.config.maxVal : (i2 > i1 ? (i2 <= $scope.model.config.maxVal ? i2 : $scope.model.config.maxVal) : $scope.model.config.maxVal)
+ ];
+ }
+ else if (!angular.isArray($scope.model.value)) {
+ //this will mean it's a delimited value stored in the db, convert it to an array
+ sliderVal = _.map($scope.model.value.split(','), function (item) {
+ return parseFloat(item);
+ });
+ }
+ }
+ else {
+ //If no value saved yet - then use default value
+ if (!$scope.model.value) {
+ sliderVal = parseFloat($scope.model.config.initVal1);
+ }
+ }
+
+ //initiate slider, add event handler and get the instance reference (stored in data)
+ var slider = $element.find('.slider-item').slider({
+ //set the slider val - we cannot do this with data- attributes when using ranges
+ value: sliderVal
+ }).on('slideStop', function () {
+ angularHelper.safeApply($scope, function () {
+ //Get the value from the slider and format it correctly, if it is a range we want a comma delimited value
+ if ($scope.model.config.enableRange === "1") {
+ $scope.model.value = slider.getValue().join(",");
+ }
+ else {
+ $scope.model.value = slider.getValue();
+ }
+ });
+ }).data('slider');
+
+ }
+
+ //tell the assetsService to load the bootstrap slider
+ //libs from the plugin folder
+ assetsService
+ .loadJs("lib/slider/bootstrap-slider.js")
+ .then(function () {
+
+ createSlider();
+
+ //here we declare a special method which will be called whenever the value has changed from the server
+ //this is instead of doing a watch on the model.value = faster
+ $scope.model.onValueChanged = function (newVal, oldVal) {
+ createSlider();
+ };
+
+ });
+
+ //load the seperate css for the editor to avoid it blocking our js loading
+ assetsService.loadCss("lib/slider/slider.css");
+
+}
+angular.module("umbraco").controller("Umbraco.PropertyEditors.SliderController", sliderController);
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html
new file mode 100644
index 0000000000..928ba7374f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.html
@@ -0,0 +1,11 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/Umbraco.Web/PropertyEditors/SliderPropertyEditor.cs b/src/Umbraco.Web/PropertyEditors/SliderPropertyEditor.cs
index 72d1819101..3f435a3465 100644
--- a/src/Umbraco.Web/PropertyEditors/SliderPropertyEditor.cs
+++ b/src/Umbraco.Web/PropertyEditors/SliderPropertyEditor.cs
@@ -13,17 +13,14 @@ namespace Umbraco.Web.PropertyEditors
internal class SliderPreValueEditor : PreValueEditor
{
-
+
[PreValueField("enableRange", "Enable range", "boolean")]
public string Type { get; set; }
-
- [PreValueField("rangeType", "Range type", "views/propertyeditors/slider/rangetype.prevalues.html")]
- public string RangeType { get; set; }
-
+
[PreValueField("initVal1", "Initial value", "number")]
public int InitialValue { get; set; }
- [PreValueField("initVal2", "Initial value 2", "number")]
+ [PreValueField("initVal2", "Initial value 2", "number", Description = "Used when range is enabled")]
public int InitialValue2 { get; set; }
[PreValueField("minVal", "Minimum value", "number")]
@@ -31,13 +28,13 @@ namespace Umbraco.Web.PropertyEditors
[PreValueField("maxVal", "Maximum value", "number")]
public int MaximumValue { get; set; }
-
- [PreValueField("enabledSteps", "Enable step increments", "boolean")]
- public bool EnableSteps { get; set; }
-
+
[PreValueField("step", "Step increments", "number")]
public int StepIncrements { get; set; }
+ [PreValueField("orientation", "Orientation", "views/propertyeditors/slider/orientation.prevalues.html")]
+ public string Orientation { get; set; }
+
}
}
}
\ No newline at end of file