removed backbone from VS solution,

renamed NzbDrone.Backbone to UI

UI/Settings/Quality/Size/QualitySizeCollectionTemplate.html

@@ -0,0 +1,4 @@
+<fieldset>
+    <legend>Quality Size Limits</legend>
+    <div id="quality-sizes-container"></div>
+</fieldset>

UI/Settings/Quality/Size/QualitySizeCollectionView.js

@@ -0,0 +1,22 @@
+'use strict';
+
+define(['app', 'Settings/Quality/Size/QualitySizeView'], function (app) {
+    NzbDrone.Settings.Quality.Size.QualitySizeCollectionView = Backbone.Marionette.CompositeView.extend({
+        itemView: NzbDrone.Settings.Quality.Size.QualitySizeView,
+        itemViewContainer: '#quality-sizes-container',
+        template: 'Settings/Quality/Size/QualitySizeCollectionTemplate',
+
+        initialize: function () {
+            var test = 1;
+        },
+
+        ui:{
+
+        },
+
+        onCompositeCollectionRendered: function()
+        {
+
+        }
+    });
+});

UI/Settings/Quality/Size/QualitySizeTemplate.html

@@ -0,0 +1,5 @@
+<b>{{name}}</b>
+<div class="quality-slider-container">
+    <input type="text" class="span4 slider" />
+</div>
+30 minute size: <span name="thirtyMinuteSize" class="thirty-minute-size"></span>MB | 60 minute size: <span name="sixtyMinuteSize" class="sixty-minute-size"></span>MB

UI/Settings/Quality/Size/QualitySizeView.js

@@ -0,0 +1,49 @@
+'use strict';
+
+define([
+        'app',
+        'Quality/QualitySizeCollection'
+
+], function () {
+
+    NzbDrone.Settings.Quality.Size.QualitySizeView = Backbone.Marionette.ItemView.extend({
+        template: 'Settings/Quality/Size/QualitySizeTemplate',
+        className: 'quality-size-item',
+
+        ui: {
+            slider: '.slider',
+            thirtyMinuteSize: '.thirty-minute-size',
+            sixtyMinuteSize: '.sixty-minute-size'
+        },
+
+        events: {
+            'slide .slider': 'slide'
+        },
+
+        initialize: function (options) {
+            this.qualityProfileCollection = options.qualityProfiles;
+        },
+
+        onRender: function () {
+            NzbDrone.ModelBinder.bind(this.model, this.el);
+
+            var self = this;
+            this.ui.slider.slider({
+                min: 0,
+                max: 200,
+                step: 1,
+                value: self.model.get('maxSize'),
+                tooltip: 'hide'
+            });
+        },
+
+        slide: function (e) {
+            var newSize = e.value;
+
+            this.model.set({ maxSize: newSize, thirtyMinuteSize: newSize * 30, sixtyMinuteSize: newSize * 60 });
+
+            this.ui.thirtyMinuteSize.html(newSize * 30);
+            this.ui.sixtyMinuteSize.html(newSize * 60);
+        }
+    });
+});