Wifeo Creative Code

<<< back to homepage for others creatives tricks

UI INPUT NUMERIC SLIDER

Input with numeric data or not :

Input only with numeric data :

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="YPxRRw" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/YPxRRw'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/56-ui-input-numeric-slider.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

body{
  font-family:Roboto;
}
.stylemagicsliderbox{
background-color:#ffffff;
  padding:12px;
  margin-left:20px;
  position:absolute;
  z-index:14;
  box-shadow:0px 0px 6px #333333;
  border-bottom:5px solid #f8b334;
}
.stylerecommendedvalue{
  color:#cb2025;
  font-size:13px;
  padding-bottom:10px;
  font-weight:500
}
.styleslider{
  height:2px;
  width:300px;
  margin-bottom:10px
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
	border:0;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.5em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-widget-content {
	background: #e7e7e7 50% 50% repeat-x;
}
.ui-widget-header {
	background: #00a096 50% 50% repeat-x;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	background: #00a096 50% 50% repeat-x;
	border-radius: 50%;
	cursor: grab;
}
.selection_valeur_nn{
	background-color:#e7e7e7;
	color:#00A096;
	width:auto;
	padding:3px;
	margin:5px;
	display:inline-block;
	cursor:pointer;
}

JAVASCRIPT CODE :

$(function() {
$( ".magic_num_input" ).click(function () {

var nom = $(this).attr("name");

$( ".table_selecteur"+nom ).remove();

var string_otherdata = "";

var otherdata = $(this).attr("otherdata");

if(otherdata!='')
{
var tab_otherdata = otherdata.split(";"); 

for (i = 0; i < tab_otherdata.length; i++) {
string_otherdata += '<div class="selection_valeur_nn" >'+tab_otherdata[i]+'</div>';
}
}

var value = $(this).val();

var minimum = parseInt($(this).attr("min"));
var maximum = parseInt($(this).attr("max"));

if(isNaN(value) == true)
{
value=minimum;
}

var sliderbox = '<div class="stylerecommendedvalue">between '+minimum+' and '+maximum+'.</div>';

sliderbox = sliderbox+'<div id="slider-vertical_'+nom+'" class="styleslider"></div>'+string_otherdata;

sliderbox = '<div class="stylemagicsliderbox table_selecteur'+nom+'">'+sliderbox+'</div>';

$(this).after(sliderbox);

$( "#slider-vertical_"+nom ).slider({
orientation: "horizontal",
range: "min",
min: minimum,
max: maximum,
value: value,
slide: function( event, ui ) {
$( "input[name='"+nom+"']"  ).val( ui.value ).change();
}
});

$( ".selection_valeur_nn").click(function () {
$( "input[name='"+nom+"']" ).val($(this).html());
});

$( document ).on( "click", function( e ){
if ( e.target.name != nom ){
$( ".table_selecteur"+nom ).remove();
}
});
});
});

HTML CODE :

<div align="center" style="background-color:#065f63; height:130px; width:100%;">
  <div align="center" style="position:relative; width:350px;color:#ffffff;font-weight:300;padding:20px">
  
  Input with numeric data or not :
    <input type="text" class="magic_num_input" 
min="10" max="200" otherdata="data 1;data 2" 
name="myinput1" value="" 
style="padding:5px;width:60px; background-color:#197e7e; border:0px;color:#053a3c; font-weight:500;" />
  <br><br>
  Input only with numeric data :
    <input type="text" class="magic_num_input" 
min="5" max="30" otherdata="" 
name="myinput2" value="20" 
style="padding:5px;width:60px;background-color:#197e7e; border:0px;color:#053a3c; font-weight:500;" />
  
</div>

NECESSARY EXTERNAL RESOURCES :

• jQuery Library : http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js
• jQuery UI Library : http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js

Edit on CODEPEN

Learn about jQuery UI slider JQUERY

Learn jQuery After() function W3SCHOOLS

Learn jQuery remove() function JQUERY DOCUMENTATION

Learn jQuery attr() function JQUERY DOCUMENTATION

KEYWORDS :

COMMENT THIS CREATIVE CODE

comments powered by Disqus

Difficulty level :

hard :

medium :

easy :

very easy :

Soigner ses interfaces utilisateur est primordial. Cela passe en partie par l'utilisation de "tricks" et animations CSS/jQuery.

Nous avons choisi de partager sous licence libre creative commons nos astuces et développements de tous les jours afin d'échanger, mais aussi de faciliter la vie des développeurs.
Wifeo Creative Code est un concentré de nos développements quotidiens: servez-vous, utilisez-les et adaptez-les sans aucune restriction. N'hésitez pas à les partager avec vos contacts !

Open code base by Wifeo is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Based on a work at http://www.wifeo.com/code.
Permissions beyond the scope of this license may be available at http://www.wifeo.com/contact-wifeo.php.

Créer un site gratuitement