GST work in progress.

common/lib/xmodule/xmodule/gst_module.py

@@ -139,8 +139,8 @@ class GraphicalSliderToolModule(XModule):
             sliders = [sliders]
         vars = [x['@var'] for x in sliders]
 
-        slider_div = '<div class="{element_class}_slider" id="{element_id}_slider_{var}" \
-        data-var="{var}"></div>'
+        slider_div = '<span class="{element_class}_slider" id="{element_id}_slider_{var}" \
+        data-var="{var}"></span>'
 
         for var in vars:
             html_string = re.sub(r'\$slider\s+' + var + r'\$',

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js

@@ -27,9 +27,9 @@ define('Inputs', ['logme'], function (logme) {
         }
 
         function createInput(obj) {
-            var constName, constValue, inputDiv, textInputDiv;
+            var constName, constValue, spanEl, inputEl;
 
-            if (typeof obj['@var'] === 'undefined') {
+            if (typeof obj['@var'] !== 'string') {
                 return;
             }
 
@@ -40,19 +40,28 @@ define('Inputs', ['logme'], function (logme) {
                 constValue = 0;
             }
 
-            inputDiv = $('#' + gstId + '_input_' + constName);
+            spanEl = $('#' + gstId + '_input_' + constName);
 
-            if (inputDiv.length === 0) {
+            if (spanEl.length === 0) {
                 return;
             }
 
-            textInputDiv = $('<input type"text" />');
-            textInputDiv.width(50);
+            inputEl = $('<input type"text" />');
 
-            textInputDiv.appendTo(inputDiv);
-            textInputDiv.val(constValue);
+            // inputEl.width(50);
+            inputEl.val(constValue);
+            inputEl.bind('change', inputOnChange);
+            inputEl.button().css({
+                'font': 'inherit',
+                'color': 'inherit',
+                'text-align': 'left',
+                'outline': 'none',
+                'cursor': 'text',
+                'height': '15px',
+                'width': '50px'
+            });
 
-            textInputDiv.bind('change', inputOnChange);
+            inputEl.appendTo(spanEl);
 
             return;
 

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/sliders.js

@@ -25,7 +25,7 @@ define('Sliders', [], function () {
 
         function createSlider(obj) {
             var constName, constValue, rangeBlobs, valueMin, valueMax,
-                sliderDiv, sliderWidth;
+                spanEl, sliderEl, sliderWidth;
 
             // The name of the constant is obj['@var']. Multiple sliders and/or
             // inputs can represent the same constant - therefore we will get
@@ -34,7 +34,7 @@ define('Sliders', [], function () {
             // blob is the min value for the slider, the third blob is the max
             // value for the slider.
 
-            if (typeof obj['@var'] === 'undefined') {
+            if (typeof obj['@var'] !== 'string') {
                 return;
             }
 
@@ -85,14 +85,16 @@ define('Sliders', [], function () {
                 }
             }
 
-            sliderDiv = $('#' + gstId + '_slider_' + constName);
+            spanEl = $('#' + gstId + '_slider_' + constName);
 
             // If a corresponding slider  DIV for this constant does not exist,
             // do not do anything.
-            if (sliderDiv.length === 0) {
+            if (spanEl.length === 0) {
                 return;
             }
 
+            sliderEl = $('<div>');
+
             // The default slider width.
             sliderWidth = 400;
 
@@ -103,21 +105,23 @@ define('Sliders', [], function () {
             }
 
             // Set the new width to the slider.
-            sliderDiv.width(sliderWidth);
-            sliderDiv.css('display', 'inline-block');
+            sliderEl.width(sliderWidth);
+            sliderEl.css('display', 'inline-block');
 
             // Create a jQuery UI slider from the current DIV. We will set
             // starting parameters, and will also attach a handler to update
             // the state on the change event.
-            sliderDiv.slider({
+            sliderEl.slider({
                 'min': valueMin,
                 'max': valueMax,
                 'value': constValue,
-                'step': 0.01,
+                'step': (valueMax - valueMin) / 50.0,
 
                 'change': sliderOnChange
             });
 
+            sliderEl.appendTo(spanEl);
+
             return;
 
             function sliderOnChange(event, ui) {