shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-01-20 14:03:36 +03:00
Code Releases Wiki Activity

Remove noUiSlider dependency, use Foundation range slider instead

Browse Source
This commit is contained in:
Daniel Molina 2015-07-14 16:04:57 +02:00
parent f2fc470a6b
commit b325253c74
13 changed files with 89 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/sunstone/public/app/main.js
View File

@ -51,9 +51,6 @@ require.config({
'flot.time': '../bower_components/flot/jquery.flot.time',
'flot.tooltip': '../bower_components/flot.tooltip/js/jquery.flot.tooltip',
/* noUiSlider */
'nouislider': '../vendor/4.0/nouislider/jquery.nouislider.min',
/* VNC */
'vnc-util': '../bower_components/no-vnc/include/util',
'vnc-webutil': '../bower_components/no-vnc/include/webutil',
@ -199,11 +196,6 @@ require.config({
deps: ['flot']
},
/* noUiSlider */
'nouislider': {
deps: ['jquery']
},
/* VNC */
'vnc-util': {
exports: 'Util'

32
src/sunstone/public/app/tabs/provision-tab/flows/list.js
View File

@ -435,13 +435,16 @@ define(function(require) {
'<br>'+
'<span style="color: #999; font-size:20px">'+role.name + ' ' + Locale.tr("VMs")+'</span>'+
'</div>'+
'<div class="large-8 columns text-center">'+
'<div class="large-8 columns">'+
'<div class="cardinality_slider_div">'+
'<br>'+
'<span class="left" style="color: #999;">'+min_vms+'</span>'+
'<span class="right" style="color: #999;">'+max_vms+'</span>'+
'<br>'+
'<div class="cardinality_slider">'+
'<div class="range-slider cardinality_slider" data-slider>'+
'<span class="range-slider-handle" role="slider" tabindex="0"></span>'+
'<span class="range-slider-active-segment"></span>'+
'<input type="hidden">'+
'</div>'+
'<br>'+
'<a href"#" class="provision_change_cardinality_button success button radius large-12" role_id="'+role.name+'">'+Locale.tr("Change Cardinality")+'</a>'+
@ -457,30 +460,15 @@ define(function(require) {
'<a href="#" class="close" style="top: 20px">&times;</a>'+
'</div>');
context.foundation('slider', 'reflow');
if (max_vms > min_vms) {
$( ".cardinality_slider_div", context).show();
$( ".cardinality_no_slider_div", context).hide();
var provision_cardinality_slider = $( ".cardinality_slider", context).noUiSlider({
handles: 1,
connect: "lower",
range: [min_vms, max_vms],
step: 1,
start: role.cardinality,
value: role.cardinality,
slide: function(type) {
if ( type != "move"){
if ($(this).val()) {
$(".cardinality_value", context).html($(this).val());
}
}
}
$( ".cardinality_slider", context).foundation('slider', 'set_value', role.cardinality);
$( ".cardinality_slider", context).on('change', function(){
$(".cardinality_value",context).html($(this).attr('data-slider'))
});
provision_cardinality_slider.val(role.cardinality)
provision_cardinality_slider.addClass("noUiSlider");
} else {
$( ".cardinality_slider_div", context).hide();
$( ".cardinality_no_slider_div", context).show();
@ -491,7 +479,7 @@ define(function(require) {
context.on("click", ".provision_change_cardinality_button", function(){
var flow_id = $(".provision_info_flow", context).attr("flow_id");
var cardinality = $(".cardinality_slider", context).val()
var cardinality = $(".cardinality_slider", context).attr('data-slider');
OpenNebula.Role.update({
data : {

2
src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general.js
View File

@ -73,6 +73,8 @@ define(function(require) {
$('#NAME', context).attr("disabled", "disabled");
$('#NAME', context).removeAttr("required");
}
context.foundation('slider', 'reflow');
}
function _setup(context) {

154
src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs.js
View File

@ -3,7 +3,7 @@ define(function(require) {
DEPENDENCIES
*/
require('nouislider');
require('foundation.slider');
var Locale = require('utils/locale');
var Tips = require('utils/tips');
@ -34,35 +34,20 @@ define(function(require) {
Tips.setup(context);
// Define the cpu slider
var cpu_input = $("#CPU", context);
var cpu_slider = $("#cpu_slider", context)
var cpu_slider = $("#cpu_slider", context).noUiSlider({
handles: 1,
connect: "lower",
range: [0, 1600],
// start: 100,
step: 50,
start: 1,
slide: function(type) {
if (type != "move") {
var values = $(this).val();
//cpu_slider.attr('data-options', 'start: 0; end: 1600; step: 50;');
cpu_input.val(values / 100);
}
},
cpu_slider.on('change.fndtn.slider', function(){
cpu_input.val($(this).attr('data-slider') / 100);
});
cpu_slider.addClass("noUiSlider");
cpu_input.change(function() {
cpu_slider.val(this.value * 100)
cpu_input.on('change', function() {
cpu_slider.foundation('slider', 'set_value', this.value * 100);
});
cpu_input.val(1);
// init::start is ignored for some reason
cpu_slider.val(100);
cpu_slider.foundation('slider', 'set_value', 100);
// Define the memory slider
@ -80,112 +65,79 @@ define(function(require) {
}
}
var memory_slider_change = function(type) {
if (type != "move") {
var values = $(this).val();
memory_input.val(values / 100);
update_final_memory_input();
}
};
var memory_slider = $("#memory_slider", context).noUiSlider({
handles: 1,
connect: "lower",
range: [0, 409600],
step: 12800,
start: 51200,
value: 512,
slide: memory_slider_change,
});
memory_slider.addClass("noUiSlider");
memory_input.change(function() {
memory_slider.val(this.value * 100)
memory_input.on('change', function() {
$("#memory_slider", context).foundation('slider', 'set_value', this.value * 100);
update_final_memory_input();
});
final_memory_input.change(function() {
memory_slider.val(this.value * 100);
memory_input.val(Math.floor(final_memory_input.val()));
})
final_memory_input.on('change', function() {
$("#memory_slider", context).foundation('slider', 'set_value', this.value * 100);
memory_input.val(Math.floor(this.value));
});
memory_unit.change(function() {
$("#memory_slider", context).on('change.fndtn.slider', function() {
memory_input.val($(this).attr('data-slider') / 100);
update_final_memory_input();
});
memory_unit.on('change', function() {
var memory_unit_val = $('#memory_unit :selected', context).val();
if (current_memory_unit != memory_unit_val) {
current_memory_unit = memory_unit_val
var new_val;
if (memory_unit_val == 'GB') {
$("#memory_slider", context).detach();
$(".memory_slider_container", context).html(
'<div id="memory_slider" class="range-slider radius" data-slider data-options="start: 0; end: 1600; step: 50;">'+
'<span class="range-slider-handle"></span>'+
'<span class="range-slider-active-segment"></span>'+
'<input type="hidden">'+
'</div>');
memory_slider.empty().noUiSlider({
handles: 1,
connect: "lower",
range: [0, 1600],
start: 1,
step: 50,
value: 51200,
slide: memory_slider_change,
});
var new_val = memory_input.val() / 1024;
memory_input.val(new_val);
memory_slider.val(new_val * 100);
new_val = memory_input.val() / 1024;
} else if (memory_unit_val == 'MB') {
$("#memory_slider", context).detach();
$(".memory_slider_container", context).html(
'<div id="memory_slider" class="range-slider radius" data-slider data-options="start: 0; end: 409600; step: 12800;">'+
'<span class="range-slider-handle"></span>'+
'<span class="range-slider-active-segment"></span>'+
'<input type="hidden">'+
'</div>');
memory_slider.empty().noUiSlider({
handles: 1,
connect: "lower",
range: [0, 409600],
start: 1,
value: 51200,
step: 12800,
slide: memory_slider_change,
});
var new_val = Math.floor(memory_input.val() * 1024);
memory_input.val(new_val);
memory_slider.val(new_val * 100);
new_val = Math.floor(memory_input.val() * 1024);
}
context.foundation('slider', 'reflow');
memory_input.val(new_val);
$("#memory_slider", context).foundation('slider', 'set_value', new_val * 100);
$("#memory_slider", context).on('change.fndtn.slider', function() {
memory_input.val($(this).attr('data-slider') / 100);
update_final_memory_input();
});
update_final_memory_input();
}
});
// init::start is ignored for some reason
memory_input.val(512).change();
$("#memory_slider", context).foundation('slider', 'set_value', 51200);
// Define the vcpu slider
var vcpu_input = $("#VCPU", context);
var vcpu_slider = $("#vcpu_slider", context)
var vcpu_slider = $("#vcpu_slider", context).noUiSlider({
handles: 1,
connect: "lower",
range: [1, 16],
start: 1,
step: 1,
slide: function(type) {
if (type != "move") {
var values = $(this).val();
//vcpu_slider.attr('data-options', 'start: 0; end: 1600; step: 50;');
vcpu_input.val(values);
}
},
vcpu_slider.on('change.fndtn.slider', function(){
vcpu_input.val($(this).attr('data-slider') / 100);
});
vcpu_slider.addClass("noUiSlider");
vcpu_input.change(function() {
vcpu_slider.val(this.value)
vcpu_input.on('change', function() {
vcpu_slider.foundation('slider', 'set_value', this.value * 100);
});
// init::start is ignored for some reason
vcpu_slider.val(0);
vcpu_slider.foundation('slider', 'set_value', 0);
}
});

20
src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/general/capacity-inputs/html.hbs
View File

@ -9,8 +9,12 @@
{{tr "Memory"}}
{{{tip (tr "Amount of RAM required for the VM, in Megabytes.")}}}
</label>
<div class="large-8 columns">
<div id="memory_slider" class="large-7 columns"></div>
<div class="large-8 columns memory_slider_container">
<div id="memory_slider" class="range-slider radius" data-slider data-options="start: 0; end: 409600; step: 12800;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>
</div>
<div class="large-2 columns">
<input type="text" id="MEMORY_TMP" name="memory_tmp" size="4" />
@ -30,7 +34,11 @@
{{{tip (tr "Percentage of CPU divided by 100 required for the Virtual Machine. Half a processor is written 0.5.")}}}
</label>
<div class="large-10 columns">
<div id="cpu_slider"></div>
<div id="cpu_slider" class="range-slider radius" data-slider data-options="start: 0; end: 1600; step: 50;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>
</div>
<div class="large-2 columns">
<input type="text" wizard_field="CPU" id="CPU" name="cpu"/>
@ -44,7 +52,11 @@
{{{tip (tr "Number of virtual cpus. This value is optional, the default hypervisor behavior is used, usually one virtual CPU.")}}}
</label>
<div class="large-10 columns">
<div id="vcpu_slider"></div>
<div id="vcpu_slider" class="range-slider radius" data-slider data-options="start: 0; end: 1600; step: 50;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>
</div>
<div class="large-2 columns">
<input type="text" wizard_field="VCPU" id="VCPU" name="vcpu"/>

1
src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/network/nic-tab.js
View File

@ -3,7 +3,6 @@ define(function(require) {
DEPENDENCIES
*/
require('nouislider');
var Config = require('sunstone-config');
var Locale = require('utils/locale');
var Tips = require('utils/tips');

96
src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab.js
View File

@ -3,7 +3,6 @@ define(function(require) {
DEPENDENCIES
*/
require('nouislider');
var Config = require('sunstone-config');
var Locale = require('utils/locale');
var Tips = require('utils/tips');
@ -92,96 +91,6 @@ define(function(require) {
$("[wizard_field]", imageContext).prop('wizard_field_disabled', false);
$("[wizard_field]", volatileContext).prop('wizard_field_disabled', true);
// Define the size slider
var final_size_input = $("#SIZE", context);
var size_input = $("#SIZE_TMP", context);
var size_unit = $("#size_unit", context);
var current_size_unit = size_unit.val();
var update_final_size_input = function() {
if (current_size_unit == 'MB') {
final_size_input.val(Math.floor(size_input.val()));
} else {
final_size_input.val(Math.floor(size_input.val() * 1024));
}
}
var size_slider_change = function(type) {
if (type != "move") {
var values = $(this).val();
size_input.val(values / 100);
update_final_size_input();
}
};
var size_slider = $("#size_slider", context).noUiSlider({
handles: 1,
connect: "lower",
range: [0, 5000],
start: 1,
step: 50,
slide: size_slider_change,
});
size_slider.addClass("noUiSlider");
size_input.change(function() {
size_slider.val(this.value * 100)
update_final_size_input();
});
size_input.val(10);
update_final_size_input();
// init::start is ignored for some reason
size_slider.val(1000);
size_unit.change(function() {
var size_unit_val = $('#size_unit :selected', context).val();
if (current_size_unit != size_unit_val) {
current_size_unit = size_unit_val
if (size_unit_val == 'GB') {
size_slider.empty().noUiSlider({
handles: 1,
connect: "lower",
range: [0, 5000],
start: 1,
step: 50,
slide: size_slider_change,
});
var new_val = size_input.val() / 1024;
size_input.val(new_val);
size_slider.val(new_val * 100);
} else if (size_unit_val == 'MB') {
size_slider.empty().noUiSlider({
handles: 1,
connect: "lower",
range: [0, 204800],
start: 1,
step: 12800,
slide: size_slider_change,
});
var new_val = Math.round(size_input.val() * 1024);
size_input.val(new_val);
size_slider.val(new_val * 100);
}
update_final_size_input();
}
});
}
function _retrieve(context) {
@ -212,11 +121,6 @@ define(function(require) {
WizardFields.fill($(".image", context), templateJSON);
} else {
$('input#' + this.diskTabId + 'radioVolatile', context).click();
if (templateJSON.SIZE) {
$('#SIZE_TMP', context).val(templateJSON.SIZE / 1024)
}
WizardFields.fill($(".volatile", context), templateJSON);
}

22
src/sunstone/public/app/tabs/templates-tab/form-panels/create/wizard-tabs/storage/disk-tab/html.hbs
View File

@ -165,27 +165,13 @@
{{/advancedSection}}
</div>
<div id="disk_type" class="volatile" style="display: none;">
<div>
<input wizard_field="SIZE" type="hidden" id="SIZE" name="size" />
</div>
<div class="row">
<div class="large-2 columns">
<label class="inline" for="SIZE_TMP">
<div class="large-6 columns left">
<label for="SIZE">
{{tr "Size"}}
{{{tip (tr "Size of the new disk")}}}
{{{tip (tr "Size of the new disk in MB")}}}
</label>
</div>
<div class="large-6 columns">
<div id="size_slider" class="large-7 columns"></div>
</div>
<div class="large-2 columns">
<input type="text" id="SIZE_TMP" name="size_tmp" size="4" />
</div>
<div class="large-2 columns">
<select id="size_unit" name="SIZE_UNIT">
<option value="GB">{{tr "GB"}}</option>
<option value="MB">{{tr "MB"}}</option>
</select>
<input wizard_field="SIZE" type="text" id="SIZE" name="SIZE"/>
</div>
</div>
<div class="row">

3
src/sunstone/public/app/tabs/vms-tab/dialogs/resize.js
View File

@ -95,6 +95,9 @@ define(function(require) {
if (that.element.VCPU) {
$('#VCPU', context).val(that.element.TEMPLATE.VCPU);
}
context.foundation('slider', 'reflow');
return false;
}

2
src/sunstone/public/css/app.css
View File

File diff suppressed because one or more lines are too long

1
src/sunstone/public/scss/app.scss
View File

@ -1,6 +1,5 @@
@import "../bower_components/fontawesome/css/font-awesome.min.css";
@import "../bower_components/jgrowl/jquery.jgrowl.min.css";
@import "../vendor/4.0/nouislider/nouislider.css";
@import "settings";
@import "foundation";

10
src/sunstone/public/vendor/4.0/nouislider/jquery.nouislider.min.js vendored
View File

@ -1,10 +0,0 @@
(function(d){d.fn.noUiSlider=function(p,r){function s(a,e,c){var f=e.data("setup"),d=f.handles;e=f.settings;f=f.pos;a=0>a?0:100<a?100:a;2==e.handles&&(c.is(":first-child")?(c=parseFloat(d[1][0].style[f])-e.margin,a=a>c?c:a):(c=parseFloat(d[0][0].style[f])+e.margin,a=a<c?c:a));e.step&&(c=l.from(e.range,e.step),a=Math.round(a/c)*c);return a}function t(a){return[a.clientX||a.originalEvent.clientX||a.originalEvent.touches[0].clientX,a.clientY||a.originalEvent.clientY||a.originalEvent.touches[0].clientY]}
var u=jQuery.fn.val;jQuery.fn.val=function(){return this.data("_isnS_")?methods.val.call(this,arguments[0]):u.apply(this,arguments)};var j=window.navigator.msPointerEnabled?2:"ontouchstart"in document.documentElement?3:1,l={to:function(a,e){e=0>a[0]?e+Math.abs(a[0]):e-a[0];return 100*e/this._length(a)},from:function(a,e){return 100*e/this._length(a)},is:function(a,e){return e*this._length(a)/100+a[0]},_length:function(a){return a[0]>a[1]?a[0]-a[1]:a[1]-a[0]}},w={handles:2,serialization:{to:["",""],
resolution:0.01}};methods={create:function(){return this.each(function(){var a=d.extend(w,p),e=d(this).data("_isnS_",!0),c=[],f,k,b="",g=function(a){return!isNaN(parseFloat(a))&&isFinite(a)},h=(a.serialization.resolution=a.serialization.resolution||0.01).toString().split("."),q=1==h[0]?0:h[1].length;a.start=g(a.start)?[a.start,0]:a.start;d.each(a,function(b,c){g(c)&&(a[b]=parseFloat(c));var d=!1;switch(b){case "range":case "start":d=2!=c.length||!g(c[0])||!g(c[1]);break;case "handles":d=1>c||2<c||
!g(c);break;case "connect":d="lower"!=c&&"upper"!=c&&"boolean"!=typeof c;break;case "orientation":d="vertical"!=c&&"horizontal"!=c;break;case "margin":case "step":d="undefined"!=typeof c&&!g(c);break;case "serialization":d="object"!=typeof c||!g(c.resolution)||"object"==typeof c.to&&c.to.length<a.handles;break;case "slide":d="function"!=typeof c}d&&console&&console.error("Bad input for "+b+" on slider:",e)});a.margin=a.margin?l.from(a.range,a.margin):0;if(a.serialization.to instanceof jQuery||"string"==
typeof a.serialization.to||!1===a.serialization.to)a.serialization.to=[a.serialization.to];"vertical"==a.orientation?(b+="vertical",f="top",k=1):(b+="horizontal",f="left",k=0);b+=a.connect?"lower"==a.connect?" connect lower":" connect":"";e.addClass(b);for(b=0;b<a.handles;b++){c[b]=e.append("<a><div></div></a>").children(":last");c[b].css(f,l.to(a.range,a.start[b])+"%");var h=(1===j?"mousedown":2===j?"MSPointerDown":"touchstart")+".noUiSliderX",r=(1===j?"mousemove":2===j?"MSPointerMove":"touchmove")+
".noUiSlider",u=(1===j?"mouseup":2===j?"MSPointerUp":"touchend")+".noUiSlider";c[b].find("div").on(h,function(b){d("body").bind("selectstart.noUiSlider",function(){return!1});if(!e.hasClass("disabled")){var n=d(this).addClass("active").parent();d("body").addClass("TOUCH");var g=n.add(d(document)).add("body"),j=parseFloat(n[0].style[f]),h=t(b),v=h,p=!1;d(document).on(r,function(b){b.preventDefault();b=t(b);b[0]-=h[0];b[1]-=h[1];var d=[v[0]!=b[0],v[1]!=b[1]],m=j+100*b[k]/(k?e.height():e.width()),m=
s(m,e,n);if(d[k]&&m!=p){n.css(f,m+"%").data("input").val(l.is(a.range,m).toFixed(q));var d=a.slide,g=e.data("_n",!0);"function"==typeof d&&d.call(g,void 0);p=m;n.css("z-index",2==c.length&&100==m&&n.is(":first-child")?2:1)}v=b});d(document).on(u+" mouseLeave.noUiSlider",function(){g.off(".noUiSlider");d("body").removeClass("TOUCH");e.find(".active").removeClass("active");e.data("_n")&&e.data("_n",!1).change()})}}).on("click",function(a){a.stopPropagation()})}if(1==j)e.on("click",function(b){if(!e.hasClass("disabled")){var d=
t(b);b=100*(d[k]-e.offset()[f])/(k?e.height():e.width());d=1<c.length?d[k]<(c[0].offset()[f]+c[1].offset()[f])/2?c[0]:c[1]:c[0];b=s(b,e,d);d.css(f,b+"%").data("input").val(l.is(a.range,b).toFixed(q));b=a.slide;"function"==typeof b&&b.call(e,void 0);e.change()}});for(b=0;b<c.length;b++)h=l.is(a.range,parseFloat(c[b][0].style[f])).toFixed(q),"string"==typeof a.serialization.to[b]?c[b].data("input",e.append('<input type="hidden" name="'+a.serialization.to[b]+'">').find("input:last").val(h).change(function(a){a.stopPropagation()})):
!1==a.serialization.to[b]?c[b].data("input",{val:function(a){if("undefined"!=typeof a)this.handle.data("noUiVal",a);else return this.handle.data("noUiVal")},handle:c[b]}):c[b].data("input",a.serialization.to[b].data("handleNR",b).val(h).change(function(){var a=[null,null];a[d(this).data("handleNR")]=d(this).val();e.val(a)}));d(this).data("setup",{settings:a,handles:c,pos:f,res:q})})},val:function(a){if(a){var e="number"==typeof a?[a]:a;return this.each(function(){for(var a=d(this).data("setup"),b=
0;b<a.handles.length;b++)if(null!=e[b]){var c=s(l.to(a.settings.range,e[b]),d(this),a.handles[b]);a.handles[b].css(a.pos,c+"%").data("input").val(l.is(a.settings.range,c).toFixed(a.res))}})}a=d(this).data("setup").handles;for(var c=[],f=0;f<a.length;f++)c.push(parseFloat(a[f].data("input").val()));return 1==c.length?c[0]:c},disabled:function(){return r?d(this).addClass("disabled"):d(this).removeClass("disabled")}};return"disabled"==p?methods.disabled.apply(this):methods.create.apply(this)}})(jQuery);

93
src/sunstone/public/vendor/4.0/nouislider/nouislider.css vendored
View File

@ -1,93 +0,0 @@
.noUiSlider,
.noUiSlider * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
display: block;
cursor: default;
}
.noUiSlider {
position: relative;
}
.noUiSlider a {
position: absolute;
z-index: 1;
}
.noUiSlider a:nth-child(2) {
background: inherit !important;
}
.noUiSlider.vertical a {
width: 100%;
bottom: 0;
}
.noUiSlider.horizontal a {
height: 100%;
right: 0;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.noUiSlider:before,
body.TOUCH,
.noUiSlider div {
-ms-touch-action: none;
}
.noUiSlider:before {
display: block;
position: absolute;
width: 150%;
left: -25%;
height: 400%;
top: -150%;
content: "";
z-index: -1;
}
.noUiSlider.vertical:before {
width: 400%;
left: -150%;
height: 150%;
top: -25%;
}
}
.noUiSlider {
border: 1px solid #908d84;
border-radius: 3px;
}
.noUiSlider.connect a,
.noUiSlider.connect.lower {
background: #2ba6cb;
}
.noUiSlider,
.noUiSlider.connect.lower a {
background: #cdebf5;
}
.noUiSlider.disabled,
.noUiSlider.disabled.connect.lower a {
background: #ccc;
box-shadow: none;
}
.noUiSlider div {
height: 18px;
width: 18px;
border: 1px solid #99968f;
border-radius: 3px;
background: #e9e9e9;
}
.noUiSlider.disabled div {
background: transparent;
}
.noUiSlider.horizontal {
width: 300px;
height: 10px;
}
.noUiSlider.horizontal div {
margin: -5px 0 0 -9px;
}
.noUiSlider.vertical {
width: 10px;
height: 300px;
}
.noUiSlider.vertical div {
margin: -9px 0 0 -5px;
}