Slider input TheSisb Follow 2012-06-15 12:41:50 License: All rights reserved Fork1 Fav0 View5154 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 99 lines HTML 16 lines CSS 199 lines Trying to do input sliders properly. Here's my attempt. http://thesisb.tumblr.com/post/25123090767/jquery-plugin-to-add-some-neat-sliders-in-your-forms https://github.com/TheSisb/jQuery-proSlider Slider input jQuery v1.6.2 (function($){ $.fn.proSlider = function() { function sliderObj(min, max, step, value, classes, el) { // Basic vars this.min = min; this.max = max; this.step = step; this.value = value; this.classes = classes; this.el = el; this.bulb; // Validate + HTML manip if (!this.validate()) return false; this.addMarkup(); // Set new vars this.width = this.el.prev('.sliderLine').width() - 30, // width this.slice = this.width / ( (this.max - this.min) / this.step ); this.posFromLeft = (((this.value - this.min) / this.step ) * this.slice ); if (this.value != this.min || this.value != "" || this.value !== undefined) this.bulb.css('left', this.posFromLeft ); // Do the binding this.bindToSelf( this ); return true; } sliderObj.prototype.validate = function() { if(this.el.attr('type') != 'range') return false; // Not an input[type=range] if (this.step === 0) return false; // Division by 0 if (((this.max - this.min) % this.step) !== 0) return false; // Steps aren't flush if ( this.value > this.max || this.value < this.min ) return false; // value not in range return true; } sliderObj.prototype.addMarkup = function() { //Add slider markup this.el.hide(); this.el.before("<div class='sliderLine " + this.classes + "'><div class='sliderBulb'>"+this.value+"</div></div>"); this.bulb = this.el.prev('.sliderLine').children('.sliderBulb'); } sliderObj.prototype.bindToSelf = function( self ) { // Bind the event this.bulb.bind('mousedown', function(e) { var $this = $(this); var $input = $this.next('input'); var startX = e.pageX; var diff = 0, val = 0; $(document).bind("mousemove.nsA", function(e){ diff = e.pageX - startX; startX = e.pageX; self.posFromLeft += diff; if (self.posFromLeft < 0 || self.posFromLeft > self.width) return; $this.css('left',self.posFromLeft); // Calculate the input value based on bulb position val = self.min + (Math.round(self.posFromLeft / self.slice) * self.step); $this.text(val); $input.val(val); }); $(document).bind('mouseup', function(){ $(document).unbind("mousemove.nsA"); }); }); } return this.each(function() { // Create slider object new sliderObj( parseInt($(this).attr('min'),10), parseInt($(this).attr('max'),10), parseInt($(this).attr('step'),10), parseInt($(this).attr('value'),10), $(this).attr("class").slice(7), $(this) ); }); }; })(jQuery); // Call it, playboy $('.slider').proSlider(); <h1>proSlider</h1> <p>~1.4Kb minified.<br>A tiny jQuery plugin that turns ugly <inputs> into beautiful sliders.</p> <h2>DEMO</h2> <h3>How many?</h3> <form method='post' enctype='application/x-www-form-urlencoded' action='#'> <p> <pre><input name='amount' type='range' class='slider' min=20 max=30 step=2 value=30></pre> </p> <input name='amount' type='range' class='slider' min=20 max=30 step=2 value=30> <p> <pre><input name='amount2' type='range' class='slider radial' min=0 max=50 step=5 value=20></pre> </p> <input name='amount2' type='range' class='slider radial' min=0 max=50 step=5 value=20> </form> Slider input body { padding:2em; background-color: #DDDDDD; font: 62.5% sans-serif; } h1,h2 { font-weight:900;font-size:3em; margin-top:0;} h3 {font-size:2.5em;} p,pre {font-size:1.8em;} span {position:fixed;top:10px;right:10px;} /* Base styling */ input[type=range] { display:none; } .sliderLine { display:block; background:#000; height:8px; width:300px; border-radius:3px; margin:40px 0 85px -5px; } .sliderBulb { overflow:visible; position:relative; font-size:1.8em; font-weight:900; width:3em; height:2em; top:-1.4em; text-align:center; padding-top:1em; color:#fff; background:#000; border:1px solid #777; -moz-border-radius:2em; -webkit-border-radius:2em; -o-border-radius:2em; border-radius:2em; cursor:move; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } /* Simurai styling with some tweaks by me http://simurai.com/post/9214147117/css3-brushed-metal */ .sliderLine.radial { height:15px; width:200px; border:2px solid #aaa; border-radius:5px; background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%), -webkit-linear-gradient(-90deg, hsl(0,0%,78%) 0%, hsl(0,0%,90%) 47%, hsl(0,0%,78%) 53%, hsl(0,0%,70%)100%); background-image: -moz-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), -moz-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%), -moz-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%), -moz-linear-gradient(-90deg, hsl(0,0%,78%) 0%, hsl(0,0%,90%) 47%, hsl(0,0%,78%) 53%, hsl(0,0%,70%)100%); } .sliderLine.radial .sliderBulb { width: 80px; height: 57px; font-size:2.5em; line-height:36px; margin:2px 0 0 -20px; border-radius: 80px; color:#555; text-shadow: rgba(102, 102, 102, .5) 0 -1px 0, rgba(255, 255, 255, .6) 0 2px 1px; background-color: #E6E6E6; -webkit-transition:color 1s; -moz-transition:color 1s; transition:color 1s; box-shadow: inset rgba(38, 38, 38, 1) 0 0px 0px 4px, /* border */ inset rgba(38, 38, 38, .8) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 0, 0, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(0, 0, 0, .15) 0 -5px 6px 4px, /* outer SD */ rgba(255, 255, 255, .5) 0 5px 6px 4px; -moz-box-shadow: inset rgba(38, 38, 38, 1) 0 0px 0px 4px, /* border */ inset rgba(38, 38, 38, .8) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 0, 0, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(0, 0, 0, .15) 0 -5px 6px 4px, /* outer SD */ rgba(255, 255, 255, .5) 0 5px 6px 4px; -webkit-box-shadow: inset rgba(38, 38, 38, 1) 0 0px 0px 4px, /* border */ inset rgba(38, 38, 38, .8) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 0, 0, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(0, 0, 0, .15) 0 -5px 6px 4px, /* outer SD */ rgba(255, 255, 255, .5) 0 5px 6px 4px; background:-webkit-radial-gradient( 50% 0%, 8% 50%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient( 50% 100%, 12% 50%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient( 0% 50%, 50% 7%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient( 100% 50%, 50% 5%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, transparent 0%, transparent 3%, rgba(0, 0, 0, .1) 3.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .2) 2.2%), -webkit-radial-gradient( 50% 50%, 200% 50%, rgba(230, 230, 230, 1) 5%, rgba(217, 217, 217, 1) 30%, rgba(153, 153, 153, 1) 100%); background:-moz-radial-gradient( 50% 0%, 8% 50%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -moz-radial-gradient( 50% 100%, 12% 50%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 100%), -moz-radial-gradient( 0% 50%, 50% 7%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -moz-radial-gradient( 100% 50%, 50% 5%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -moz-repeating-radial-gradient( 50% 50%, 100% 100%, transparent 0%, transparent 3%, rgba(0, 0, 0, .1) 3.5%), -moz-repeating-radial-gradient( 50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), -moz-repeating-radial-gradient( 50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .2) 2.2%), -moz-radial-gradient( 50% 50%, 200% 50%, rgba(230, 230, 230, 1) 5%, rgba(217, 217, 217, 1) 30%, rgba(153, 153, 153, 1) 100%); } .sliderLine.radial .sliderBulb:active { color: #06C; text-shadow: rgba(0, 51, 102, .3) 0 -1px 0, #B3D9FF 0 2px 1px, rgba(153, 221, 255, 1) 0 0 5px, rgba(0, 127, 255, .6) 0 0 20px; -webkit-box-shadow: inset rgba(0, 76, 153, 1) 0 0px 0px 4px, /* border */ inset rgba(0, 38, 77, .4) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 51, 102, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(128, 191, 255, .8) 0 0px 3px 2px, /* outer SD */ rgba(51, 102, 153, .25) 0 -5px 6px 4px, /* outer SD */ rgba(232, 242, 252, 1) 0 5px 6px 4px; -moz-box-shadow: inset rgba(0, 76, 153, 1) 0 0px 0px 4px, /* border */ inset rgba(0, 38, 77, .4) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 51, 102, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(128, 191, 255, .8) 0 0px 3px 2px, /* outer SD */ rgba(51, 102, 153, .25) 0 -5px 6px 4px, /* outer SD */ rgba(232, 242, 252, 1) 0 5px 6px 4px; box-shadow: inset rgba(0, 76, 153, 1) 0 0px 0px 4px, /* border */ inset rgba(0, 38, 77, .4) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 51, 102, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(128, 191, 255, .8) 0 0px 3px 2px, /* outer SD */ rgba(51, 102, 153, .25) 0 -5px 6px 4px, /* outer SD */ rgba(232, 242, 252, 1) 0 5px 6px 4px; } Trying to do input sliders properly. Here's my attempt. http://thesisb.tumblr.com/post/25123090767/jquery-plugin-to-add-some-neat-sliders-in-your-forms https://github.com/TheSisb/jQuery-proSlider (function($){ $.fn.proSlider = function() { function sliderObj(min, max, step, value, classes, el) { // Basic vars this.min = min; this.max = max; this.step = step; this.value = value; this.classes = classes; this.el = el; this.bulb; // Validate + HTML manip if (!this.validate()) return false; this.addMarkup(); // Set new vars this.width = this.el.prev('.sliderLine').width() - 30, // width this.slice = this.width / ( (this.max - this.min) / this.step ); this.posFromLeft = (((this.value - this.min) / this.step ) * this.slice ); if (this.value != this.min || this.value != "" || this.value !== undefined) this.bulb.css('left', this.posFromLeft ); // Do the binding this.bindToSelf( this ); return true; } sliderObj.prototype.validate = function() { if(this.el.attr('type') != 'range') return false; // Not an input[type=range] if (this.step === 0) return false; // Division by 0 if (((this.max - this.min) % this.step) !== 0) return false; // Steps aren't flush if ( this.value > this.max || this.value < this.min ) return false; // value not in range return true; } sliderObj.prototype.addMarkup = function() { //Add slider markup this.el.hide(); this.el.before("<div class='sliderLine " + this.classes + "'><div class='sliderBulb'>"+this.value+"</div></div>"); this.bulb = this.el.prev('.sliderLine').children('.sliderBulb'); } sliderObj.prototype.bindToSelf = function( self ) { // Bind the event this.bulb.bind('mousedown', function(e) { var $this = $(this); var $input = $this.next('input'); var startX = e.pageX; var diff = 0, val = 0; $(document).bind("mousemove.nsA", function(e){ diff = e.pageX - startX; startX = e.pageX; self.posFromLeft += diff; if (self.posFromLeft < 0 || self.posFromLeft > self.width) return; $this.css('left',self.posFromLeft); // Calculate the input value based on bulb position val = self.min + (Math.round(self.posFromLeft / self.slice) * self.step); $this.text(val); $input.val(val); }); $(document).bind('mouseup', function(){ $(document).unbind("mousemove.nsA"); }); }); } return this.each(function() { // Create slider object new sliderObj( parseInt($(this).attr('min'),10), parseInt($(this).attr('max'),10), parseInt($(this).attr('step'),10), parseInt($(this).attr('value'),10), $(this).attr("class").slice(7), $(this) ); }); }; })(jQuery); // Call it, playboy $('.slider').proSlider(); <h1>proSlider</h1> <p>~1.4Kb minified.<br>A tiny jQuery plugin that turns ugly <inputs> into beautiful sliders.</p> <h2>DEMO</h2> <h3>How many?</h3> <form method='post' enctype='application/x-www-form-urlencoded' action='#'> <p> <pre><input name='amount' type='range' class='slider' min=20 max=30 step=2 value=30></pre> </p> <input name='amount' type='range' class='slider' min=20 max=30 step=2 value=30> <p> <pre><input name='amount2' type='range' class='slider radial' min=0 max=50 step=5 value=20></pre> </p> <input name='amount2' type='range' class='slider radial' min=0 max=50 step=5 value=20> </form> body { padding:2em; background-color: #DDDDDD; font: 62.5% sans-serif; } h1,h2 { font-weight:900;font-size:3em; margin-top:0;} h3 {font-size:2.5em;} p,pre {font-size:1.8em;} span {position:fixed;top:10px;right:10px;} /* Base styling */ input[type=range] { display:none; } .sliderLine { display:block; background:#000; height:8px; width:300px; border-radius:3px; margin:40px 0 85px -5px; } .sliderBulb { overflow:visible; position:relative; font-size:1.8em; font-weight:900; width:3em; height:2em; top:-1.4em; text-align:center; padding-top:1em; color:#fff; background:#000; border:1px solid #777; -moz-border-radius:2em; -webkit-border-radius:2em; -o-border-radius:2em; border-radius:2em; cursor:move; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } /* Simurai styling with some tweaks by me http://simurai.com/post/9214147117/css3-brushed-metal */ .sliderLine.radial { height:15px; width:200px; border:2px solid #aaa; border-radius:5px; background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%), -webkit-linear-gradient(-90deg, hsl(0,0%,78%) 0%, hsl(0,0%,90%) 47%, hsl(0,0%,78%) 53%, hsl(0,0%,70%)100%); background-image: -moz-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), -moz-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%), -moz-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%), -moz-linear-gradient(-90deg, hsl(0,0%,78%) 0%, hsl(0,0%,90%) 47%, hsl(0,0%,78%) 53%, hsl(0,0%,70%)100%); } .sliderLine.radial .sliderBulb { width: 80px; height: 57px; font-size:2.5em; line-height:36px; margin:2px 0 0 -20px; border-radius: 80px; color:#555; text-shadow: rgba(102, 102, 102, .5) 0 -1px 0, rgba(255, 255, 255, .6) 0 2px 1px; background-color: #E6E6E6; -webkit-transition:color 1s; -moz-transition:color 1s; transition:color 1s; box-shadow: inset rgba(38, 38, 38, 1) 0 0px 0px 4px, /* border */ inset rgba(38, 38, 38, .8) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 0, 0, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(0, 0, 0, .15) 0 -5px 6px 4px, /* outer SD */ rgba(255, 255, 255, .5) 0 5px 6px 4px; -moz-box-shadow: inset rgba(38, 38, 38, 1) 0 0px 0px 4px, /* border */ inset rgba(38, 38, 38, .8) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 0, 0, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(0, 0, 0, .15) 0 -5px 6px 4px, /* outer SD */ rgba(255, 255, 255, .5) 0 5px 6px 4px; -webkit-box-shadow: inset rgba(38, 38, 38, 1) 0 0px 0px 4px, /* border */ inset rgba(38, 38, 38, .8) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 0, 0, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(0, 0, 0, .15) 0 -5px 6px 4px, /* outer SD */ rgba(255, 255, 255, .5) 0 5px 6px 4px; background:-webkit-radial-gradient( 50% 0%, 8% 50%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient( 50% 100%, 12% 50%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient( 0% 50%, 50% 7%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-radial-gradient( 100% 50%, 50% 5%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, transparent 0%, transparent 3%, rgba(0, 0, 0, .1) 3.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .2) 2.2%), -webkit-radial-gradient( 50% 50%, 200% 50%, rgba(230, 230, 230, 1) 5%, rgba(217, 217, 217, 1) 30%, rgba(153, 153, 153, 1) 100%); background:-moz-radial-gradient( 50% 0%, 8% 50%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -moz-radial-gradient( 50% 100%, 12% 50%, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 100%), -moz-radial-gradient( 0% 50%, 50% 7%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -moz-radial-gradient( 100% 50%, 50% 5%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 100%), -moz-repeating-radial-gradient( 50% 50%, 100% 100%, transparent 0%, transparent 3%, rgba(0, 0, 0, .1) 3.5%), -moz-repeating-radial-gradient( 50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), -moz-repeating-radial-gradient( 50% 50%, 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .2) 2.2%), -moz-radial-gradient( 50% 50%, 200% 50%, rgba(230, 230, 230, 1) 5%, rgba(217, 217, 217, 1) 30%, rgba(153, 153, 153, 1) 100%); } .sliderLine.radial .sliderBulb:active { color: #06C; text-shadow: rgba(0, 51, 102, .3) 0 -1px 0, #B3D9FF 0 2px 1px, rgba(153, 221, 255, 1) 0 0 5px, rgba(0, 127, 255, .6) 0 0 20px; -webkit-box-shadow: inset rgba(0, 76, 153, 1) 0 0px 0px 4px, /* border */ inset rgba(0, 38, 77, .4) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 51, 102, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(128, 191, 255, .8) 0 0px 3px 2px, /* outer SD */ rgba(51, 102, 153, .25) 0 -5px 6px 4px, /* outer SD */ rgba(232, 242, 252, 1) 0 5px 6px 4px; -moz-box-shadow: inset rgba(0, 76, 153, 1) 0 0px 0px 4px, /* border */ inset rgba(0, 38, 77, .4) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 51, 102, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(128, 191, 255, .8) 0 0px 3px 2px, /* outer SD */ rgba(51, 102, 153, .25) 0 -5px 6px 4px, /* outer SD */ rgba(232, 242, 252, 1) 0 5px 6px 4px; box-shadow: inset rgba(0, 76, 153, 1) 0 0px 0px 4px, /* border */ inset rgba(0, 38, 77, .4) 0 -1px 5px 4px, /* soft SD */ inset rgba(0, 51, 102, .25) 0 -1px 0px 7px, /* bottom SD */ inset rgba(255, 255, 255, .7) 0 2px 1px 7px, /* top HL */ rgba(128, 191, 255, .8) 0 0px 3px 2px, /* outer SD */ rgba(51, 102, 153, .25) 0 -5px 6px 4px, /* outer SD */ rgba(232, 242, 252, 1) 0 5px 6px 4px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Trying to do input sliders properly. Here's my attempt. http://thesisb.tumblr.com/post/25123090767/jquery-plugin-to-add-some-neat-sliders-in-your-forms https://github.com/TheSisb/jQuery-proSlider Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author TheSisb URLhttp://twitter.com/TheSisb I've been playing around with CSS for way too long. Working on my javascript. Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/pFWU/js"></script> user_interface Discussion 3 answers[jQuery] Dragging my slider looks bad in Chrome Questions on this code? Tags user_interface Forked sort by latest page views favorite forked forked: Slider input sylvain.poll 10 1313 56/4/37
