slider 相关问题

如何通过单击按钮从 ion.rangeSlider 组件获取低值和高值？这是我的 jQuery 代码： $(文档).ready(函数(){ $("#range_1").ionRangeSlide...</desc> <question vote="16"> <p>如何通过单击按钮从 <a href="http://ionden.com/a/plugins/ion.rangeSlider/en.html" rel="noreferrer" title="ion.rangeSlider">ion.rangeSlider</a> 组件获取低值和高值？</p> <p>这是我的 jQuery 代码：</p> <pre><code><script> $(document).ready(function(){ $("#range_1").ionRangeSlider({ min: 10, max: 50, from: 10, to: 20, type: 'double', step: 1, prettify: true, hasGrid: false }); }); </script> <script> $(document).ready(function(){ $('#get_values').click(function(){ var low = $('#range_1').... ???; var high = $('#range_1').... ???; alert(low); }); }); </script> </code></pre> </question> <answer tick="false" vote="25"> <pre><code>// Launch plugin $("#range").ionRangeSlider({ type: "double", min: 0, max: 1000, from: 200, to: 500 }); // Saving it's instance to var var slider = $("#range").data("ionRangeSlider"); // Get values var from = slider.result.from; var to = slider.result.to; </code></pre> <p>请参阅解决方案<a href="http://jsfiddle.net/2qLum6s7/">http://jsfiddle.net/2qLum6s7/</a>。适用于最新版本的 Ion.RangeSlider (2.1.2)。</p> </answer> <answer tick="false" vote="12"> <p>使用 jQuery 的 data() 方法：</p> <pre><code>var low = $('#range_1').data().from; var high = $('#range_1').data().to; </code></pre> </answer> <answer tick="true" vote="10"> <p>这是一个解决方案：<a href="http://jsfiddle.net/IonDen/xaaw56bk/" rel="noreferrer">http://jsfiddle.net/IonDen/xaaw56bk/</a></p> <pre><code>var $range = $(".js-range-slider"), $result = $(".js-result"), $getvalues = $(".js-get-values"), from = 0, to = 0; var saveResult = function (data) { from = data.fromNumber; to = data.toNumber; }; var writeResult = function () { var result = "from: " + from + ", to: " + to; $result.html(result); }; $range.ionRangeSlider({ type: "double", min: 10, max: 50, from: from, to: to, onLoad: function (data) { saveResult(data); writeResult(); }, onChange: saveResult, onFinish: saveResult }); $getvalues.on("click", writeResult); </code></pre> </answer> <answer tick="false" vote="8"> <p>之前的答案基于旧的插件 API，不再起作用。这是 2.x 版本的新版本： <a href="http://jsfiddle.net/IonDen/2L15xoym/">http://jsfiddle.net/IonDen/2L15xoym/</a></p> <pre><code>var $range = $(".js-range-slider"), $result = $(".js-result"), $getvalues = $(".js-get-values"), from = 0, to = 0; var saveResult = function (data) { from = data.from; to = data.to; }; var writeResult = function () { var result = "from: " + from + ", to: " + to; $result.html(result); }; $range.ionRangeSlider({ type: "double", min: 10, max: 50, from: from, to: to, onStart: function (data) { saveResult(data); writeResult(); }, onChange: saveResult, onFinish: saveResult }); $getvalues.on("click", writeResult); </code></pre> </answer> <answer tick="false" vote="3"> <pre><code>const range = $('#range_1'); const rangeData = range.data('ionRangeSlider'); const start = rangeData.result.from; const max = rangeData.result.max; // rangeData.result['property'] </code></pre> <p><strong>版本2.3.0（已测试）</strong></p> </answer> <answer tick="false" vote="1"> <p>此方法适用于最新版本。使用事件 onChange 从属性“from”和“to”获取数据。 Ion.RangeSlider v2.3.1：</p> <pre><code> var slider = $('.js-range-slider'); slider.ionRangeSlider({ type: "double", prefix: '$', grid: true, }); slider.on("change", function () { var $inp = $(this); var from = $inp.data("from"); // get data from attribute var to = $inp.data("to"); // get data from attribute console.log(from, to); }); </code></pre> <p>Html 标记：</p> <pre><code><input type="text" class="js-range-slider" name="my_range" value="" data-min="100" data-max="4000" data-from="1000" data-to="2000"/> </code></pre> </answer> <answer tick="false" vote="0"> <pre><code>var val = $('#theSpecificSliderID').slider('value'); // Get value <br> $('#theSpecificSliderID').slider('value', 33); // Set value </code></pre> </answer> <answer tick="false" vote="0"> <p>使用开始、改变或结束超载。我正在使用完成重载并将值更新为 SomeValue 元素。 </p> <pre><code> $("#Range_1").ionRangeSlider({ min: 0, max: 100, type: 'single', step: 1, postfix: " %", prettify: false, hasGrid: true, onFinish: function(data){ var value = data.fromNumber; $("#SomeValue").val(value); } }); </code></pre> </answer> <answer tick="false" vote="0"> <p>你可以直接调用.val()（在2.3.1中测试过）</p> <pre><code>var slider = $('.js-range-slider'); var value = slider.val() </code></pre> </answer> </body></html>

javascript jquery slider

回答 0 投票 0

将参数传递给滑块更新？

更新：我学习了 matplotlib 的基础知识，所以现在我意识到我之前的问题不合适，但现在我遇到了一个新问题。假设我有一个已更新的滑块定义

matplotlib slider matplotlib-widget

回答 2 投票 0

延长 Slider Pro 幻灯片的幻灯片持续时间

我正在使用 Slider Pro 在网站上播放汽车自行车幻灯片。我需要延长幻灯片每张图像的显示时间。在文件中它提到了一个名为“

javascript jquery html css slider

回答 3 投票 0

React-Slick 滑块显示的幻灯片数量多于“slidesToShow”属性中指定的数量

我正在使用react-slick来制作YouTube嵌入式视频的轮播。我已将 'slidesToShow' 值指定为 3。但它显示了超过 3 张幻灯片，而且幻灯片未居中对齐。

css reactjs slider carousel react-slick

回答 1 投票 0

如何在 Bootstrap 轮播中启用每 10 秒自动滑动 2 个图像和一个视频？

我正在尝试创建一个图像和视频组合的滑块。我尝试使用引导程序来实现，但是我失败了。这是下面的代码我正在尝试创建一个图像和视频组合的滑块。我尝试使用引导程序来实现，但是我没有这样做。下面是代码 <div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#carousel-slider" data-slide-to="0" class="active"></li> <li data-target="#carousel-slider" data-slide-to="1"></li> <li data-target="#carousel-slider" data-slide-to="2"></li> </ol>   <div class="carousel-inner" role="listbox">  <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div>   <div class="carousel-item"> <video src="./video/video1.mp4" autoplay poster="./images/boardwalk.jpg"></video> </div>   <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div>  </div> </div> 我需要三张幻灯片，其中两张是图像幻灯片，一张是视频幻灯片，每 15 秒更改一次。有没有办法使用jquery添加自定义幻灯片只需将 data-interval 属性添加到引导轮播中，即可每隔 x 秒自动滚动到下一张幻灯片。请注意，data-interval在milliseconds中计算您的值，因此如果您想每10秒后更改轮播幻灯片，则需要添加data-interval=10000。检查并运行以下代码片段，获取有关如何使用 data-interval 属性自动滑动轮播的实际示例： /* CSS */ html, body {margin: 0px; padding: 0px; width: 100%; height: 100%;} .wrapper { margin: 0 auto; width: 100%; } .carousel-item img {width: 100%; height: 200px;} .carousel-item video {width: 100%; height: 200px;}  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="wrapper"> <div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel" data-interval="2000">  <ol class="carousel-indicators"> <li data-target="#carousel-slider" data-slide-to="0" class="active"></li> <li data-target="#carousel-slider" data-slide-to="1"></li> <li data-target="#carousel-slider" data-slide-to="2"></li> </ol>   <div class="carousel-inner" role="listbox">  <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div>   <div class="carousel-item"> <video controls> <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> </video> </div>   <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div>  </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> 我真的很喜欢 http://kenwheeler.github.io/slick/ 的 jquery 滑块。我认为这会对你有很大帮助。我在下面为您制作了一个示例： //Initialize your slider in your script file $("#carousel-slider").slick({ arrows: false, infinite: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1500, mobileFirst: true });  <head> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" /> </head> <div id="carousel-slider"> <div> <img style="width:100%; height:100%;" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide"> </div> <div> <video style="width:100%; height:100%;" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" autoplay></video> </div> <div> <img style="width:100%; height:100%;" class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide"> </div> </div>  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> 您可以将“autoplaySpeed”更改为您想要更改的任何间隔。将 data-bs-ride="carousel" 放在包含 id="carousel-slider" 的 div 中，将 data-bs-interval="10000" 放在包含 class="carousel-item 的 div 中“

jquery html bootstrap-4 slider

回答 3 投票 0

如何将我点击的图标在carouselSlider中居中-Flutter

我是 Flatter 新手，很想获得一些帮助。如何将我单击的图标移动到中心？小部件中有一种可以理解的方式吗？ CarouselSlider.builder( 选项：

flutter dart slider

回答 1 投票 0

matplotlib 多个依赖滑块

我有两个滑块设置，一个用于控制绘图上的位置，一个用于控制 x 轴的比例。这很好用，除了我使用不同的数据框来控制滑块而不是......

python matplotlib slider matplotlib-widget

回答 1 投票 0

slider 相关问题

最新问题