Question

我想创建一个范围滑块和一个文本框。我在使用范围滑块时，我希望在文本框中自动更新游侠值，反之亦然。另外，我需要更改滑块下部的颜色（滑块拇指的左侧）。我正在使用下面的代码来实现此目的

!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";function b(){var a=document.createElement("input");return a.setAttribute("type","range"),"text"!==a.type}function c(a,b){var c=Array.prototype.slice.call(arguments,2);return setTimeout(function(){return a.apply(null,c)},b)}function d(a,b){return b=b||100,function(){if(!a.debouncing){var c=Array.prototype.slice.apply(arguments);a.lastReturnVal=a.apply(window,c),a.debouncing=!0}return clearTimeout(a.debounceTimeout),a.debounceTimeout=setTimeout(function(){a.debouncing=!1},b),a.lastReturnVal}}function e(a){return a&&(0===a.offsetWidth||0===a.offsetHeight||a.open===!1)}function f(a){for(var b=[],c=a.parentNode;e(c);)b.push(c),c=c.parentNode;return b}function g(a,b){function c(a){"undefined"!=typeof a.open&&(a.open=a.open?!1:!0)}var d=f(a),e=d.length,g=[],h=a[b];if(e){for(var i=0;e>i;i++)g[i]=d[i].style.cssText,d[i].style.setProperty?d[i].style.setProperty("display","block","important"):d[i].style.cssText+=";display: block !important",d[i].style.height="0",d[i].style.overflow="hidden",d[i].style.visibility="hidden",c(d[i]);h=a[b];for(var j=0;e>j;j++)d[j].style.cssText=g[j],c(d[j])}return h}function h(a,b){var c=parseFloat(a);return Number.isNaN(c)?b:c}function i(a){return a.charAt(0).toUpperCase()+a.substr(1)}function j(b,e){if(this.$window=a(window),this.$document=a(document),this.$element=a(b),this.options=a.extend({},n,e),this.polyfill=this.options.polyfill,this.orientation=this.$element[0].getAttribute("data-orientation")||this.options.orientation,this.onInit=this.options.onInit,this.onSlide=this.options.onSlide,this.onSlideEnd=this.options.onSlideEnd,this.DIMENSION=o.orientation[this.orientation].dimension,this.DIRECTION=o.orientation[this.orientation].direction,this.DIRECTION_STYLE=o.orientation[this.orientation].directionStyle,this.COORDINATE=o.orientation[this.orientation].coordinate,this.polyfill&&m)return!1;this.identifier="js-"+k+"-"+l++,this.startEvent=this.options.startEvent.join("."+this.identifier+" ")+"."+this.identifier,this.moveEvent=this.options.moveEvent.join("."+this.identifier+" ")+"."+this.identifier,this.endEvent=this.options.endEvent.join("."+this.identifier+" ")+"."+this.identifier,this.toFixed=(this.step+"").replace(".","").length-1,this.$fill=a('<div class="'+this.options.fillClass+'" />'),this.$handle=a('<div class="'+this.options.handleClass+'" />'),this.$range=a('<div class="'+this.options.rangeClass+" "+this.options[this.orientation+"Class"]+'" id="'+this.identifier+'" />').insertAfter(this.$element).prepend(this.$fill,this.$handle),this.$element.css({position:"absolute",width:"1px",height:"1px",overflow:"hidden",opacity:"0"}),this.handleDown=a.proxy(this.handleDown,this),this.handleMove=a.proxy(this.handleMove,this),this.handleEnd=a.proxy(this.handleEnd,this),this.init();var f=this;this.$window.on("resize."+this.identifier,d(function(){c(function(){f.update(!1,!1)},300)},20)),this.$document.on(this.startEvent,"#"+this.identifier+":not(."+this.options.disabledClass+")",this.handleDown),this.$element.on("change."+this.identifier,function(a,b){if(!b||b.origin!==f.identifier){var c=a.target.value,d=f.getPositionFromValue(c);f.setPosition(d)}})}Number.isNaN=Number.isNaN||function(a){return"number"==typeof a&&a!==a};var k="rangeslider",l=0,m=b(),n={polyfill:!0,orientation:"horizontal",rangeClass:"rangeslider",disabledClass:"rangeslider--disabled",horizontalClass:"rangeslider--horizontal",verticalClass:"rangeslider--vertical",fillClass:"rangeslider__fill",handleClass:"rangeslider__handle",startEvent:["mousedown","touchstart","pointerdown"],moveEvent:["mousemove","touchmove","pointermove"],endEvent:["mouseup","touchend","pointerup"]},o={orientation:{horizontal:{dimension:"width",direction:"left",directionStyle:"left",coordinate:"x"},vertical:{dimension:"height",direction:"top",directionStyle:"bottom",coordinate:"y"}}};return j.prototype.init=function(){this.update(!0,!1),this.onInit&&"function"==typeof this.onInit&&this.onInit()},j.prototype.update=function(a,b){a=a||!1,a&&(this.min=h(this.$element[0].getAttribute("min"),0),this.max=h(this.$element[0].getAttribute("max"),100),this.value=h(this.$element[0].value,Math.round(this.min+(this.max-this.min)/2)),this.step=h(this.$element[0].getAttribute("step"),1)),this.handleDimension=g(this.$handle[0],"offset"+i(this.DIMENSION)),this.rangeDimension=g(this.$range[0],"offset"+i(this.DIMENSION)),this.maxHandlePos=this.rangeDimension-this.handleDimension,this.grabPos=this.handleDimension/2,this.position=this.getPositionFromValue(this.value),this.$element[0].disabled?this.$range.addClass(this.options.disabledClass):this.$range.removeClass(this.options.disabledClass),this.setPosition(this.position,b)},j.prototype.handleDown=function(a){if(this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),!((" "+a.target.className+" ").replace(/[\n\t]/g," ").indexOf(this.options.handleClass)>-1)){var b=this.getRelativePosition(a),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=this.getPositionFromNode(this.$handle[0])-c,e="vertical"===this.orientation?this.maxHandlePos-(b-this.grabPos):b-this.grabPos;this.setPosition(e),b>=d&&b<d+this.handleDimension&&(this.grabPos=b-d)}},j.prototype.handleMove=function(a){a.preventDefault();var b=this.getRelativePosition(a),c="vertical"===this.orientation?this.maxHandlePos-(b-this.grabPos):b-this.grabPos;this.setPosition(c)},j.prototype.handleEnd=function(a){a.preventDefault(),this.$document.off(this.moveEvent,this.handleMove),this.$document.off(this.endEvent,this.handleEnd),this.$element.trigger("change",{origin:this.identifier}),this.onSlideEnd&&"function"==typeof this.onSlideEnd&&this.onSlideEnd(this.position,this.value)},j.prototype.cap=function(a,b,c){return b>a?b:a>c?c:a},j.prototype.setPosition=function(a,b){var c,d;void 0===b&&(b=!0),c=this.getValueFromPosition(this.cap(a,0,this.maxHandlePos)),d=this.getPositionFromValue(c),this.$fill[0].style[this.DIMENSION]=d+this.grabPos+"px",this.$handle[0].style[this.DIRECTION_STYLE]=d+"px",this.setValue(c),this.position=d,this.value=c,b&&this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(d,c)},j.prototype.getPositionFromNode=function(a){for(var b=0;null!==a;)b+=a.offsetLeft,a=a.offsetParent;return b},j.prototype.getRelativePosition=function(a){var b=i(this.COORDINATE),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=0;return"undefined"!=typeof a["page"+b]?d=a["client"+b]:"undefined"!=typeof a.originalEvent["client"+b]?d=a.originalEvent["client"+b]:a.originalEvent.touches&&a.originalEvent.touches[0]&&"undefined"!=typeof a.originalEvent.touches[0]["client"+b]?d=a.originalEvent.touches[0]["client"+b]:a.currentPoint&&"undefined"!=typeof a.currentPoint[this.COORDINATE]&&(d=a.currentPoint[this.COORDINATE]),d-c},j.prototype.getPositionFromValue=function(a){var b,c;return b=(a-this.min)/(this.max-this.min),c=Number.isNaN(b)?0:b*this.maxHandlePos},j.prototype.getValueFromPosition=function(a){var b,c;return b=a/(this.maxHandlePos||1),c=this.step*Math.round(b*(this.max-this.min)/this.step)+this.min,Number(c.toFixed(this.toFixed))},j.prototype.setValue=function(a){(a!==this.value||""===this.$element[0].value)&&this.$element.val(a).trigger("input",{origin:this.identifier})},j.prototype.destroy=function(){this.$document.off("."+this.identifier),this.$window.off("."+this.identifier),this.$element.off("."+this.identifier).removeAttr("style").removeData("plugin_"+k),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0])},a.fn[k]=function(b){var c=Array.prototype.slice.call(arguments,1);return this.each(function(){var d=a(this),e=d.data("plugin_"+k);e||d.data("plugin_"+k,e=new j(this,b)),"string"==typeof b&&e[b].apply(e,c)})},"rangeslider.js is available in jQuery context e.g $(selector).rangeslider(options);"});
    $(function(){
    	$('input[type="range"]').rangeslider({
    		polyfill:false,
    		onInit:function(){
    		},
    	
    		onSlideEnd:function(position, value){
    			//console.log('onSlideEnd');
    			//console.log('position: ' + position, 'value: ' + value);
    		}
    	});
    });
    
    
    
    
    var $range = $(".js-range-slider"),
        $input = $(".js-input"),
        instance,
        min = 1,
        max = 1000;
    
    $range.ionRangeSlider({
        type: "single",
        min: min,
        max: max,
        from: 500,
        onStart: function (data) {
            $input.prop("value", data.from);
        },
        onChange: function (data) {
            $input.prop("value", data.from);
        }
    });
    
    instance = $range.data("ionRangeSlider");
    
    $input.on("change keyup", function () {
        var val = $(this).prop("value");
        
        // validate
        if (val < min) {
            val = min;
        } else if (val > max) {
            val = max;
        }
        
        instance.update({
            from: val
        });
    });

    html{
    	height:100%;
    	background:#42426b;
    	background:radial-gradient(#31314a,#42426b);
    	background-repeat:no-repeat;
    }
    body{
    	margin:0;
    	color:#444;
    	padding:50px;
    	font:300 18px/18px Roboto, sans-serif;
    }
    *,:after,:before{box-sizing:border-box}
    .pull-left{float:left}
    .pull-right{float:right}
    .clearfix:after,.clearfix:before{content:'';display:table}
    .clearfix:after{clear:both;display:block}
    
    .rangeslider,
    .rangeslider__fill {
    	display:block;
    	border-radius:10px;
    }
    
    .rangeslider {
    	position:relative;
    }
    .rangeslider:after{
    	top:50%;
    	left:0;
    	right:0;
    	content:'';
    	width:100%;
    	height:5px;
    	margin-top:-2.5px;
    	border-radius:5px;
    	position:absolute;
    	background:#212131;
    }
    
    .rangeslider--horizontal{
    	width:100%;
    	height:28px;
    }
    
    .rangeslider--vertical{
    	width:5px;
    	min-height:150px;
    	max-height:100%;
    }
    .rangeslider--disabled{
    	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    	opacity:0.4;
    }
    
    .rangeslider__fill{
    	position:absolute;
    	background:#ff637b;
    }
    .rangeslider--horizontal .rangeslider__fill{
    	top:0;
    	height:100%;
    }
    .rangeslider--vertical .rangeslider__fill{
    	bottom:0;
    	width:100%;
    }
    
    .rangeslider__handle{
    	top:50%;
    	width:28px;
    	height:28px;
    	cursor:pointer;
    	margin-top:-14px;
    	background:white;
    	position:absolute;
    	background:#ff637b;
    	border-radius:50%;
    	display:inline-block;
    }
    .rangeslider__handle:active{
    	background:#ff5a7b;
    }
    
    .rangeslider__fill,
    .rangeslider__handle{
    	z-index:1;
    }
    .rangeslider--horizontal .rangeslider__fill{
    	top:50%;
    	height:5px;
    	margin-top:-2.5px;
    }
    
    /* Budget */
    .budget-wrap{
    	padding:40px;
    	background:#292942;
    	box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22);
    }
    .budget-wrap .header .title{
    	color:#fff;
    	font-size:18px;
    	margin-bottom:30px;
    }
    .budget-wrap .header .title .pull-right{
    	color:#ff5a84;
    	font-size:24px;
    	font-weight:400;
    }
    .budget-wrap .footer{
    	margin-top:30px;
    }
    .budget-wrap .footer .btn{
    	color:inherit;
    	padding:12px 24px;
    	border-radius:50px;
    	display:inline-block;
    	text-decoration:none;
    }
    .budget-wrap .footer .btn.btn-def{
    	color:#525263;
    }
    .budget-wrap .footer .btn.btn-pri{
    	color:#eee;
    	background:#ff5a84;
    }

 <!DOCTYPE html>
    <html>
    <head>
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/wordpress/wp-content/themes/insido/insido/style_sbi_mg.css" />
    </head>
    <body>
    <div class="budget-wrap">
    	<div class="budget">
    		<div class="header">
    			<div class="title clearfix">Enter Your Amount <span class="pull-right"></span></div>
    		</div>
    		<div class="content">
    			<input type="text" class="js-input" name="LoanAmntVal" id="LoanAmntVal" class="text" value="100">
    			<input type="range" class="js-range-slider" min="1" max="1000" value="20" data-rangeslider>
    		</div>
    
    	</div>
    </div>
    </body>
    </html>

小提琴： https://jsfiddle.net/anoopcr/ojLxhfp7/18/

我面临的问题是文本框和范围滑块没有相互重新发送。

Answer 1

您可以为滑块指定自己的ID以及文本框。然后使用jQuery，将事件附加到每个事件都很简单。

$('#slider').on('input change',function(){
    $('#textbox').val($(this).val());
});

$('#textbox').keyup(function(e){
  if (e.keyCode==13) {   //only activates after pressing Enter key
      var val = $(this).val().replace(/\D/g,'');   // check only for digits
      $('#slider').val(val);
  }
});

html{
	height:100%;
	background:#42426b;
	background:radial-gradient(#31314a,#42426b);
	background-repeat:no-repeat;
}
body{
	margin:0;
	color:#444;
	padding:50px;
	font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.rangeslider,
.rangeslider__fill {
	display:block;
	border-radius:10px;
}

.rangeslider {
	position:relative;
}
.rangeslider:after{
	top:50%;
	left:0;
	right:0;
	content:'';
	width:100%;
	height:5px;
	margin-top:-2.5px;
	border-radius:5px;
	position:absolute;
	background:#212131;
}

.rangeslider--horizontal{
	width:100%;
	height:28px;
}

.rangeslider--vertical{
	width:5px;
	min-height:150px;
	max-height:100%;
}
.rangeslider--disabled{
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	opacity:0.4;
}

.rangeslider__fill{
	position:absolute;
	background:#ff637b;
}
.rangeslider--horizontal .rangeslider__fill{
	top:0;
	height:100%;
}
.rangeslider--vertical .rangeslider__fill{
	bottom:0;
	width:100%;
}

.rangeslider__handle{
	top:50%;
	width:28px;
	height:28px;
	cursor:pointer;
	margin-top:-14px;
	background:white;
	position:absolute;
	background:#ff637b;
	border-radius:50%;
	display:inline-block;
}
.rangeslider__handle:active{
	background:#ff5a7b;
}

.rangeslider__fill,
.rangeslider__handle{
	z-index:1;
}
.rangeslider--horizontal .rangeslider__fill{
	top:50%;
	height:5px;
	margin-top:-2.5px;
}

/* Budget */
.budget-wrap{
	padding:40px;
	background:#292942;
	box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22);
}
.budget-wrap .header .title{
	color:#fff;
	font-size:18px;
	margin-bottom:30px;
}
.budget-wrap .header .title .pull-right{
	color:#ff5a84;
	font-size:24px;
	font-weight:400;
}
.budget-wrap .footer{
	margin-top:30px;
}
.budget-wrap .footer .btn{
	color:inherit;
	padding:12px 24px;
	border-radius:50px;
	display:inline-block;
	text-decoration:none;
}
.budget-wrap .footer .btn.btn-def{
	color:#525263;
}
.budget-wrap .footer .btn.btn-pri{
	color:#eee;
	background:#ff5a84;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>

<div class="budget-wrap">
	<div class="budget">
		<div class="header">
			<div class="title clearfix">Enter Your Amount <span class="pull-right"></span></div>
		</div>
		<div class="content">
    <input id="textbox" type="text" class="js-input" name="LoanAmntVal" id="LoanAmntVal" class="text" value="100">
			<input id="slider" type="range" class="js-range-slider" min="1" max="1000" value="20" data-rangeslider>
		</div>

	</div>
</div>

带有文本框Jquery和CSS的范围滑块

1 个答案: