Input with Draggable Values

Developer
Cmalven
Size
3,061 Kb
Views
4,048
  1. Input with Draggable Values Previews
  2. Input with Draggable Values HTML Codes
  3. Input with Draggable Values CSS Codes
  4. Input with Draggable Values JS Codes

How do I make an input with draggable values?

Works as a normal text input, but can also be dragged to increment value.. What is a input with draggable values? How do you make a input with draggable values? This script and codes were developed by Cmalven on 29 January 2023, Sunday.

Input with Draggable Values Previews
IQ Test

Input with Draggable Values - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Input with Draggable Values</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="input-wrapper"> <input type="text" placeholder="0.00" value="100.00"/> <div class="input-cover"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Input with Draggable Values - Script Codes CSS Codes

body { padding: 50px;
}
.input-wrapper { position: relative;
}
.input-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: ew-resize;
}
input { width: 100%; padding: 8px 0; font-size: 14px; border: none; border-bottom: 1px dashed #ccc;
}

Input with Draggable Values - Script Codes JS Codes

(function() { var APP; APP = { dragging: false, startingX: null, currentX: 0, increment: 0.1, originalVal: null, didDrag: null, $el: $('.input-cover'), isOverInput: false, down: function(evt) { APP.dragging = true; APP.startingX = evt.pageX; return APP.originalVal = Number(APP.$el.val()); }, up: function(evt) { if (!(APP.didDrag || !APP.isOverInput)) { $('input').focus(); } APP.dragging = false; APP.startingX = null; return APP.didDrag = false; }, move: function(evt) { var dragDistance, newVal; if (!APP.dragging) { return; } APP.didDrag = true; APP.currentX = evt.pageX; dragDistance = APP.currentX - APP.startingX; newVal = APP.originalVal + (APP.increment * dragDistance); newVal = Math.round(newVal * 100) / 100; return $('input').val(newVal); } }; APP.$el.on('mousedown', APP.down).on('mouseenter', function() { return APP.isOverInput = true; }).on('mouseleave', function() { return APP.isOverInput = false; }); $(window).on('mousemove', APP.move).on('mouseup', APP.up);
}).call(this);
Input with Draggable Values - Script Codes
Input with Draggable Values - Script Codes
Home Page Home
Developer Cmalven
Username cmalven
Uploaded January 29, 2023
Rating 3
Size 3,061 Kb
Views 4,048
Do you need developer help for Input with Draggable Values?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Cmalven (cmalven) Script Codes
Name
Chi Coast
Responsive Device Morph
THREE.js Globe imported from OBJ
Type Pathfitting
TweenMax Smoke
One Distortion
Let it Snow
Three.js Playground
Layer Tennis Header
Three.js Node Cloud
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!