如何在PHP中获取/获取HTML5 Range Slider的值？
在PHP中获取HTML5 Range Slider的值，需要通过前端（如JavaScript）将数据发送到后端（如PHP）进行处理。以下是一个简单的示例，展示了如何在PHP中获取HTML5 Range Slider的值。
- 创建HTML文件（例如：index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP Range Slider</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="range" id="rangeSlider" min="0" max="100" value="50">
<button id="submitValue">提交值</button>
<script>
$(document).ready(function() {
$("#submitValue").click(function() {
var rangeValue = $("#rangeSlider").val();
$.ajax({
url: 'get_range_value.php',
type: 'POST',
data: { 'rangeValue': rangeValue },
success: function(response) {
alert("服务器响应：" + response);
}
});
});
});
</script>
</body>
</html>- 创建PHP文件（例如：get_range_value.php）：
<?php
if (isset($_POST['rangeValue'])) {
$rangeValue = $_POST['rangeValue'];
echo "您设置的Range Slider值为：" . $rangeValue;
} else {
echo "未收到Range Slider的值";
}
?>在这个示例中，我们使用了jQuery库来处理AJAX请求。当用户点击“提交值”按钮时，会发送一个POST请求到get_range_value.php文件，并将Range Slider的值作为参数传递。在PHP文件中，我们检查是否收到了名为“rangeValue”的POST参数，如果是，则输出其值。
这个示例仅作为一个简单的演示，实际应用中可能需要根据具体需求进行调整。例如，可以使用更安全的方法来处理用户输入，或者将数据存储到数据库中。
相关·内容
2回答
我在表单中使用有困难。为了测试，我使用了一个简单的表单和处理器(最初来自)：
form.php
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui
浏览 3提问于2013-11-01得票数 2
6回答
我有一个html5范围输入和一个文本框输入。当范围更改时，文本框将更新。但是，当我在文本框中输入一个数字时，应该怎么做才能更新范围输入呢？
这是我当前的代码：
<div>
<input id="slider" type="range" min="0" max="200" />
<input id="box" type="text" value="0"/>
</div>
<script>
var slider = docum
浏览 1提问于2012-11-20得票数 14
1回答
如果你有一个带有jquery ui范围滑块的狭窄结果过滤页面，jquery ui范围滑块将数据发布到一个php页面，然后输出到同一页面上的，那么有没有办法生成分配给jquery ui滑块的范围值呢？
我能想象放在这里的东西..但是不知道如何从执行查询/提供结果的页面中抓取。
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 50000,
values: [ 0, 50000 ],
});
浏览 0提问于2011-07-01得票数 1
3回答
jQuery滑块值保存
、、、
我旁边有一个input和jQuery滑块。
<div id="slider_value_1" class="slider"></div> <input type="text" name="value_1" value="<?php echo get_option('value_1'); ?>" />
滑块设置为：
$(".slider").slider({
slide: function(event, ui) {
浏览 0提问于2011-01-19得票数 2
回答已采纳
1回答
创建动态范围滑块
、、、
我需要一些帮助来创建这个动态范围滑块，因为我不太擅长后端编码。
基本上这里的目标是，如果用户选择90比索以上或90比索到1000比索以上的选项，滑块将改变最小和最大范围。
这是我开始做的事情。
Javascript/Jquery
<script>
jQuery(function() {
jQuery( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
step:5,
values: [ 0, 300 ],
slide: function( event,
浏览 1提问于2013-08-29得票数 0
3回答
我有一个距离滑块，它有两个射程。我想在我的javascript中得到这个滑块的值。
以下是我所做的：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script sr
浏览 2提问于2016-01-07得票数 0
回答已采纳
如何在按下确定按钮后使用幻灯片范围中的值(例如:插入到mysql)？
按submit后，插入到mysql (在php标签中，而不是脚本中)
$(function() {
var minPriceInRupees = 0;
var maxPriceInRupees = 500;
var currentMinValue = 33;
var currentMaxValue = 333;
$( "#slider-range" ).slider({
range: true,
min: minPriceInRupe
浏览 3提问于2014-08-28得票数 0
我使用jquery-ui和一些范围滑块，它们是在外部JavaScript文件中指定的，如下所示：
$( function() {
$( ".slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$(this).prev().val( ui.values[ 0 ] + "-" + ui.values[ 1 ] );
}
});
$(".slider-range
浏览 7提问于2018-08-17得票数 0
2回答
几个小时来一直想弄清楚.
我试图通过从jQuery滑块中获取<input>标签中包含的值来使用AJAX。AJAX不会失败(请参阅代码)，当我试图通过console.log发送变量Data:时，它会正确地打印出来。
注意到：jQuery和php在同一个页面上，因此不使用url:参数，也不使用任何您将调用的参数。
以下是<script>部分：
jQuery(function($){
$("input[id='protein-slider']").ready(function(){
var p_ra
浏览 1提问于2015-04-10得票数 1
2回答
我有这个jquery脚本。这是一个范围滑块，它创造了1到25之间的值。
Javascript代码
<script>
$( function() {
$( "#slider-range-max" ).slider({
range: "max",
min: 1,
max: 25,
value: 1,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
$( "#amount"
浏览 0提问于2018-05-13得票数 0
2回答
我正在使用HTML对象制作一组滑块。当一个滑块被移动时，其他滑块应该向相反的方向移动相同的数量。
我可以用slider_02移动“document.querySelector("#slider_02").value”，但是我需要移动所有其他滑块。
我可以使用例如"not“吗?在X:not(#slider_01)中，我应该为"X”写些什么？
我的问题是如何选择其他滑块.
浏览 3提问于2016-02-21得票数 2
我有一个有3个图片(箭头)的站点，可以将您发送到另一个页面: index.html -page1.php -page2.php -page3.php。
对于每个滑块，都有一个带有引导的滑块：
<input id="ex1" data-slider-id='exSlider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="5"
浏览 9提问于2015-08-18得票数 0
回答已采纳
好的，这就是问题所在。我不擅长jquery，但我正在努力变得更好。我有一个jquery范围滑块，工作良好。但我试图添加一个更改函数，以便当值被更改时，它将最小年龄值放入一个文本框中，将最大年龄值放入另一个文本框中。"change“块上面的所有内容都可以正常工作，但是一旦我从"change :”添加到代码中的块，滑块就会出现，而且我有一个明显的错误。基于在线教程，我尝试了20种不同的方法，我只是不知道为什么它不起作用。
$( "#slider-range" ).slider({
range: true,
min: 18,
ma
浏览 5提问于2017-05-05得票数 0
回答已采纳
1回答
我想把两个拇指放在滑块中，它使用CSS和HTML5显示值的范围。请帮帮我。现在我用一个拇指做了一个滑块。我需要一个滑块，有不同的背景与该范围和两个拇指在它存在。我的代码如下：
input[type=range] {
border: 1px solid #4ba8b1;
margin: 0px 0px 5px 5px;
background:-webkit-gradient(linear,center top, center bottom, from(#CFDCDD),to(#DFE9EA),color-stop(50%,#DFE9EA));
float:left
浏览 5提问于2011-03-04得票数 3
我有一个ui滑块元素，用来让人们给产品打分，目的是让这个滑块和一个按钮一起将值插入到MySQL表中(类似于投票)。
我的滑块看起来像
$("#slider-range-max4").slider({
range: "max",
min: 1,
max: 10,
value: 0,
slide: function (event, ui) {
$("#slide
浏览 5提问于2013-06-14得票数 0
回答已采纳
$("#slider-range-max-day-count").slider({
range: "max",
min: 1,
max: 365,
value: 1,
animate: "fast",
slide: function (event, ui) {
$("#dayCount").text(u
浏览 12提问于2016-07-23得票数 0
回答已采纳
2回答
我正在尝试更改标准的Ruby on Rails表单，让用户输入具有HTML5范围的值。我不知道该如何替换标准的"<%= f.text_field :W1 %>“。
我有一个滑块：
<input class="slide" type="range" min="0" max="200" id="slider1">
在以下位置显示值：
<text id="W1">100</text>
多亏了Ajax：
$("#slider1"
浏览 0提问于2013-03-08得票数 7
回答已采纳
2回答
我正在尝试做一个html5画布绘图应用程序，我不知道如何用一个范围滑块来改变形状的slider宽度。PLease帮我拿javascript或者告诉我哪里错了
这就是我在JS中尝试过的：
function change_width(element) {
lineWidth = element.innerHTML
}
浏览 6提问于2021-12-27得票数 0
1回答
如何自动更新音频滑块jquery
、、、、
我正在寻求帮助，因为我目前被一个脚本卡住了。让我解释一下:我在页面上有一个html5音频播放器，以及一个在值"id".audio上操作的滑块，它使用jquery库创建了。
当我们在滑块上操作时，音频值和播放器的值都会自动改变，但是当我们在播放器的滑块上操作时，使用jquery (滑块)实现的音频值不会改变，除非在加载脚本之前更改值.总之，我想知道如何使滑块自动更新自己，取决于html5音频播放器。
下面是脚本：
$(function() {
//Store frequently elements in variables
var s
浏览 0提问于2014-05-01得票数 0
每当有人在id city中输入新文本时，我都会使用$.post()加载一个页面。当我进入城市并移动到另一个字段时，什么也没有发生。就是这个网站。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" c
浏览 0提问于2015-10-24得票数 0
有任何方法来获取HTML5范围输入的滑块柄的像素位置吗？
<input type="range" id="combicalc_contribution-slider" min="1" max="50" value="25">
我尝试使用最大值、最小值和值的组合来计算位置，以求出“沿着轨道”的百分比，但计算值在较低的值时变化到左边，在较高的值时变化到右边。
这是它的代码：
var sliderWidth = slider[0]['clientWidth'];
var sliderPos =
浏览 0提问于2017-09-27得票数 6
3回答
因此，我有一个带有jquery ui滑块的页面，并使用以下内容进行了初始化：
var min = $("#attrInformation").data("lowest_price"),
max = $("#attrInformation").data("highest_price");
$( "#slider-range" ).slider({
range: true,
min: min,
max: max,
values: [ min, m
浏览 0提问于2012-01-10得票数 17
回答已采纳
1回答
我希望使用php中的$_POST[]来获取范围滑块中的两个值以插入表中。
可以不使用javascript吗？如果没有，可以自由回答。谢谢
HTML:
<form method="post">
<!-- #1 range value set 1-2 -->
<input id="slide_default" type="text" data-slider-min="0" data-slider-max="5" data-slider-step="1"
浏览 2提问于2016-03-28得票数 3
回答已采纳
我想设置html5输入类型'range‘的样式。我正在尝试使用创建一个移动网站，但在以正确的方式设计它的样式上遇到了一些麻烦。
我想要有两个标签，一个在范围选择器的两端，并希望‘笔’是一个黑色的细笔触。
现在我有这样的东西
<label for="slider">None</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
浏览 0提问于2011-01-20得票数 2
回答已采纳
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="jquery.ui.all.css">
<script src="jquery-1.7.1.js"></script>
<script src="jquery.ui.widget.js"></script>
<scrip
浏览 1提问于2012-03-31得票数 0
回答已采纳
1回答
我用AJAX向服务器端脚本发送两个jQuery变量(urlid和bonus)。这正如期而至。
现在，我想向脚本中添加一个jQuery滑块(#slider-vertical)。滑块的实际选择值应该与AJAX一起发送。我试过这样做，但滑块的价值没有得到发送。我没有收到错误信息。
jQuery(function ($) {
getResponse(0);
$('ul#menu li').click(function () {
var bonus = $(this).attr("value");
getResponse(
浏览 1提问于2021-04-07得票数 0
回答已采纳
我有以下关于range slider的JQuery函数。它工作得很好。
<script type="text/javascript">
jQuery(function() {
jQuery("#slider-range").slider({
range: true,
min: 55,
max: 50000,
values: [55, 50000],
slide:
浏览 0提问于2012-03-28得票数 0
回答已采纳
我有滑块的价格范围搜索功能使用UI和javascript。
，这是代码.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
浏览 0提问于2019-01-28得票数 1
我试图将toFixed应用于jQuery UI滑块的乘积值，如下所示：
jQuery( "#width-amount-english" ).val( jQuery( ".width-slider-range" ).slider( "values", 0 ) * 0.393701.toFixed(2) + "in - " + jQuery( ".width-slider-range" ).slider( "values", 1 ) * 0.393701.toFixed(2) +" in
浏览 0提问于2016-01-07得票数 0
回答已采纳
我有一个价格范围滑块。我想要什么，当我滑动范围滑块，然后我在警告框中得到它的值。现在，当我警告它显示[objectobject]我不知道为什么时会发生什么？如何在提示框中获取价格滑块的值？ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"
浏览 15提问于2019-01-25得票数 0
9回答
我有一个ui.slider，并在运行时更改它的min和最大值。但是，这些更改只会在视图中得到反映，当我随后也设置值时(这会导致触发不需要的事件)。在我看来，它也应该在设置min和max之后刷新视图。是否有一个简单的解决办法，似乎是一个刷新方法是缺少的滑块。
$("#something").slider({
range: true,
values: [25, 75],
min: 0,
max: 100
});
$("#something").slider("option", "min", 25); /
浏览 11提问于2011-06-13得票数 25
回答已采纳
1回答
以下是我尝试过的方法，但不起作用：
var $slider = jQuery( "#slider" );
$slider.slider("option", "min", min_range);
$slider.slider("option", "max", max_range);
浏览 0提问于2015-10-09得票数 0
4回答
下面是我的代码：
<input type="range" name="slider" id="slider" value="5" min="0" max="10" step="1" />
我测试过的所有HTML5移动浏览器(iPhone 4，Android，iPad)都将其呈现为输入type=text。为什么这不会呈现一个滑块？
浏览 3提问于2011-05-01得票数 2
回答已采纳
如何动态设置HTML5范围控制的最大值、最小值和步长值？
<input id="slider" type ="range" min="0" max="300" step="20" value="100" />
我尝试过下面的方法，但没有成功。
$('#slider').attr('min', 10);
$('#slider').attr('max', 100);
浏览 2提问于2015-05-18得票数 1
1回答
我有一个HTML5距离滑翔机。我们可以把这个值发送到php吗？我会用这个值发一封电子邮件。
HTML：
<div class="unit">
<div class="slider-group">
Max value:
<label id="1-h"></label>
</div>
<div id="slider-1-h"></div>
</div>
Javascript：
$(function()
浏览 1提问于2016-01-16得票数 0
回答已采纳
嗨，我正在使用jquery ul滑块进行价格过滤。我在滑动时在url参数中传递了最低和最高价格。
$('.priceSlider').slider({
range: true,
min: 0,
max: 2000000,
values: [500000, 1500000],
step: 10000,
slide: function(event, ui) {
// first range input(min)
var firstValue = ui.values[0];
// seco
浏览 1提问于2016-02-11得票数 1
1回答
不完全确定我该如何正确地表达这个问题，我为此道歉。我希望在这里发生的是，“输出”显示在滑块的正旁，而不是它的下方。
要查看问题所在: alainbruno.nl/form.html
无论如何，我只是从HTML5开始，这是目前为止的代码：
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Character Creation</title>
</head>
<script src="https://ajax.googleapis.com/ajax/
浏览 0提问于2013-04-06得票数 1
回答已采纳
1回答
嘿，我有一些名为“lp-滑块”的jquery滑块，设置如下：
<div class="xs-col-12">
<div class="col-xs-2 label label-default">Grit</div>
<div class="col-xs-9">
<div class="lp-slider
浏览 4提问于2014-01-02得票数 3
回答已采纳
如何获得位于窗体中的范围滑块的值？
我不能仅仅从名字上询问它的价值。
我使用这个JavaScript函数在滑块旁边的表单中键入值。
function showValue(newValue) {
document.getElementById("range").innerHTML=newValue; }
我能从警局打电话或类似的东西吗？
编辑！好了，如果我把你们搞糊涂了，我很抱歉，但英语不是我的母语。我会尽力解释的。
我在HTML5中有一个联系人表单，它将数据提交给mail.php。
<input type="text" name
浏览 1提问于2012-08-03得票数 3
回答已采纳
我在Chrome 41中使用jQuery 2.1。当输入滑块发生变化时，我需要从它获得值；但是，当我在jquery中使用changes时，我只在鼠标释放后才从滑块中获得值，而不是在鼠标向下拖动期间。
这个小例子说明了这个问题：
<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" />
<br />
<span id="slider_value">
浏览 12提问于2015-03-08得票数 25
回答已采纳
我想得到的值范围滑块每个最小/最大值到PHP。我不知道是怎么回事，也不知道为什么。我使用的是jQueryUI范围滑块：
<form method="POST" action="value.php">
<input type="text" id="amount" name="slide-value" /><br/>
<div id="slider-range" style="width: 500px;"></di
浏览 18提问于2020-06-01得票数 2
回答已采纳
我已经在我的网站上添加了一个jQuery滑块。当一个登录的客户第一次测量滑块的值，然后将滑块值存储在数据库中，下一次当他登录时，我想要显示根据数据库中存储的值为该登录客户选择的滑块值。
我更新了滑块的值，但问题是根据所选的滑块的值位置不正确。
请参考下面的代码：
$customer = Mage::getSingleton('customer/session')->getCustomer();
if($customer->getId())
{
$measurement_data = Mage::getModel("mea
浏览 2提问于2015-11-26得票数 0
我的index.php页面上有一个纸滑块。我可以得到纸滑块的实时值，并在输入type=text中显示它的值。形式文字区域..。和迪夫。
我想要的是在另一个php page.for中回显这个滑块的实时值，例如: value.php，有什么方法可以做到吗？
我会非常感激的。
这是我的密码：
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"
浏览 0提问于2015-06-02得票数 1
1回答
我在ACF插件中创建了一组字段，这组字段只属于一个页面(例如page-contacts.php)，但我希望在多个页面上显示这组字段(例如page-main.php)。这是页面-contact.php上的中继器字段循环。
<?php if( have_rows('slider') ): ?>
<div id = "events-slider">
<?php while( have_rows('slider') ): the_row(); ?>
<div class = &#
浏览 16提问于2018-01-19得票数 0
回答已采纳
我已经为年龄实现了JQuery UI滑翔机：
Javascript：
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 50,
values: [ 0, 50 ],
slide: function( event, ui ) {
浏览 6提问于2016-03-09得票数 1
回答已采纳
我有一个静态旋转木马，并希望集成到wordpress没有任何插件。我的问题是如何将包含所有旋转木马图像的图像文件夹添加到wordpress中。
<?php if(is_front_page()){
$i=0;
query_posts('showposts=3&post_type=post');
?>
<section id="main-slider" class="no-margin">
<div class="carousel slide" data-ride
浏览 5提问于2016-09-26得票数 1
3回答
我可能错了，但我认为这是一个用jquery制作的对象：
$("#slider").slider({
value:40,
min: 0,
max: 80,
step: 10
});
如果不是这样，请继续阅读，让我知道，我会纠正这个问题。
我想获取max (80)的内容。我目前可以获取value的内容，但是对max执行完全相同的操作不会返回80。
alert($("#slider").slider("value")); // Outputs 40
alert($("#slider").slider(&#
浏览 1提问于2012-08-22得票数 1
回答已采纳
如何在提交表单时从滑块范围jquery回显数值，以及如何从$_GET值设置滑块范围的值？
.........................................................................................................................
首先，如何在按下提交按钮后从滑块范围回显数值(使用php标签)
例如；
<?php
if(isset($_POST["submit"]))
{
echo 2 value from slider range
浏览 0提问于2014-08-30得票数 0
我在Wordpress的/js文件夹中有这个JQuery脚本，我需要更改我存储在数据库中的一些值。
$( "#slider-range2" ).slider({
range: true,
min: 18,
max: 90,
values: [ 35, 50 ],
slide: function( event, ui ) {
$( "#amount2" ).val( ui.values[ 0 ] + "-" + ui.values[ 1 ] );
}
});
$( "#amou
浏览 0提问于2011-09-30得票数 3
我正在使用HTML5输入范围，我需要设置滑块的样式，使其具有不同的颜色(black)和宽度(2px)直到滑块的位置，并将其设置为在滑块之后具有#393837和1px。
为了说明，下面的图像，其中它是更暗，更厚的前和后更薄：
到目前为止，我已经实现了这一点，整个滑块都有#393837颜色。
.slider {
width: 100%;
height: 1px;
outline: none;
background: #393837;
-webkit-appearance: none;
}
.slider::-webkit-slider-thumb {
浏览 1提问于2020-07-14得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
