标签: rangeslider

我正在尝试使用rangelider jQuery插件:http://andreruffert.github.io/rangeslider.js/

但是,它似乎不起作用.我究竟做错了什么？

<input
    type="range"
    min="10"                    // default 0
    max="1000"                  // default 100
    step="10"                   // default 1
    value="300"                 // default min + (max-min)/2
    data-orientation="vertical" // default horizontal
>

$( document ).ready(function() {
    $('input[type="range"]').rangeslider();
});

Jsfiddle:http://jsfiddle.net/8n2ckkmr/

我想创建一个范围滑块.但是,我在同一位置分配2个滑块,然后只有1个正在工作.我找到了一些外部API来创建Slider.有没有办法在iOS中以编程方式创建Range滑块.

这是我的代码..

  CGRect frame = CGRectMake(20, 330, 300, 60);

slider1 = [[UISlider alloc] initWithFrame:frame];
[slider1 addTarget:self action:@selector(sliderActionMin:) forControlEvents:UIControlEventValueChanged];
[slider1 setBackgroundColor:[UIColor clearColor]];
slider1.minimumValue = 0.0;
slider1.maximumValue = 55.0;
slider1.continuous = YES;
slider1.value= 16
slider1.contentMode=UIViewContentModeScaleToFill;
[self.view addSubview:slider1];


slider2 = [[UISlider alloc] initWithFrame:frame];
[slider2 addTarget:self action:@selector(sliderActionMin:) forControlEvents:UIControlEventValueChanged];
[slider2 setBackgroundColor:[UIColor clearColor]];
slider2.minimumValue = 0.0;
slider2.maximumValue = 55.0;
slider2.continuous = YES;
slider2.contentMode=UIViewContentModeScaleToFill;
slider2.value=[SingletonClass sharedSingleton].minAge;
[self.view addSubview:slider2];

我已经实现了一个范围滑块,它使用该值从数组中获取元素并显示该元素,而不是显示范围值.它适用于Chrome和Firefox但不适用于IE 11 - 当滑块移动时,该值不会获得更新的元素.

HTML:

<div id="yearSlider" style="z-index:2;">
  <form>
    <div align="center">
      <input 
        type="range" 
        min=1 
        max=10 
        value=0 
        id="fader" 
        step=1 
        oninput="outputUpdate(years[value])"
      >
      <output for=fader id=volume>1908</output>
    </div>
  </form>

使用Javascript:

var years = [0,1908, 1910, 1912, 1915, 1920, 1935, 1949, 1982, 2005, 2015];

function outputUpdate(vol) {
  document.querySelector('#volume').value = vol;
}

通过搜索,我发现这与"oninput"在IE中的工作原理(或不工作原理)有关.

我试着从这里加入解决方案

<input 
  type="range" 
  min="5" 
  max="10" 
  step="1" 
  oninput="showVal(this.value)" 
  onchange="showVal(this.value)"
>

但它仍然没有更新.

我的jsfiddle

我正在尝试使用rangeslider.js

这是我的HTML包括:

<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="rangeslider.js-2.1.1/rangeslider.min.js"></script>

这是我的HTML:

<input type="range" min="0.0" max="1.0" step="0.05" value="0.8" data-rangeslider="" style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;">

<script>
    // Initialize a new plugin instance for all
    // e.g. $('input[type="range"]') elements.
    $('input[type="range"]').rangeslider();

    // Destroy all plugin instances created from the
    // e.g. $('input[type="range"]') elements.
    $('input[type="range"]').rangeslider('destroy');

    // Update all rangeslider instances for all
    // e.g. $('input[type="range"]') elements.
    // Usefull if you changed some attributes e.g. `min` or `max` etc.
    $('input[type="range"]').rangeslider('update', true);
</script>

我收到此错误: …

我花了 3 天的时间为 React Native 开发 Custom Slider 和 Range Slider。我很惊讶地发现 React Native 中的滑块组件是如此基本并且不允许任何自定义。我想分享我制作的滑块脚本，以便每个人都可以在他们的项目中使用它们。

定制滑块

自定义滑块示例

范围滑块

范围滑块示例

如果您发现任何错误或问题，请随时联系我们。（这些脚本与Expo完全兼容）

我设置了一个范围滑块,范围从0到2小时,时间以分钟计算,然后转换为hh:mm,如下所示:10分钟,20分钟,1小时20分钟,2小时.

但是现在我正在尝试ng-repeat使用范围滑块指定的范围过滤掉一些项目,我很难让这个工作.

这是我做的http://cdpn.io/LDusa

我正在使用http://danielcrisp.github.io/angular-rangeslider/demo/作为范围滑块.

以下是代码:

var app = angular.module('myApp', ['ui-rangeSlider']);
app.controller('myCtrl', function ($scope) {
    $scope.sliderConfig = {
        min:  0,
        max:  120,
        step: 10,
        userMin: 0,
        userMax: 30
    };

   $scope.times = [
      {"time": "20"},
      {"time": "50"},
      {"time": "30"},
      {"time": "10"},
      {"time": "85"},
      {"time": "75"},
      {"time": "95"},
      {"time": "100"},
      {"time": "80"},
      {"time": "200"},
      {"time": "260"},
      {"time": "120"},
      {"time": "62"},
      {"time": "68"},
      {"time": "5"},
      {"time": "116"}
   ];
});

app.filter('customFilter', function () {
    return function (value) {
        var h …

我已经在某种程度上完成了工作，如下所示。如何实现这种范围滑块？

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects …

我正在使用 Android 材料组件库的最新 (1.3.0-alpha01) 版本来显示范围滑块（带有两个拇指的滑块）。现在需要自定义标签并始终在 TextView 中的拇指上显示每个拇指的值（没有任何可绘制对象或默认标志，请参见附图）。怎样才能让labelBehavior始终可见并在自定义视图显示拇指值，当用户拖动它们？

截至Shiny 0.11,滑块已更改为ion.RangeSlider.

乍一看,它们看起来非常不同,特别是HTML 5皮肤:

......但显然这些新的滑块可以(很多？)比旧的滑块更多.

我想利用新的ion.RangeSlider,特别是这些功能updateSliderInput,这对我来说不适用于旧的滑块.

但是,我似乎无法找到有关如何真正利用新滑块提供的功能的任何文档.

滑块上的文档看起来与0.11之前的文档相同.

RStudio说新的滑块"支持从服务器更新更多属性......"

我的问题是,支持的属性究竟是什么？

此外,看起来有一些皮肤可以改变滑块的外观 - 使用Shiny时这些皮肤是否可以开箱即用？

例如:

我很想使用这个皮肤 - 突然之间旧滑块和新滑块之间的区别并不那么激烈.

谢谢.

我有一个已解决的问题Animating range ticks when move range thumb。从那个问题，我有一个input type="range"自定义外观 - 拇指被做成弧形（半圆），span它采用范围的值，并被设计为一个带圆圈的拇指div，mask它的作用类似于刻度 - 步骤。

从这个预期结果

我试图用曲线将该弧连接到滑块。我尝试使用伪元素，但渐变与滑块上的渐变不同步，我无法制作如图所示的曲线。我还尝试使用JS 画布绘制该曲线并将其放置在所需的位置，但渐变再次不同步 - 变为固定颜色。

我想使用CSS 蒙版，但我不确定是否可以用它来制作想要的曲线。

这些是我的主要研究点：

• CSS 技巧 - 样式化跨浏览器兼容的范围输入
• 沿画布中的曲线渐变描边- 试图用画布制作类似的曲线（连接点）

这是我的CodePen和代码

// Position of span that shows range value and tick curve position
const tickContainer = document.getElementById('tickContainer');

const range = document.getElementById('range');
const rangeV = document.getElementById('rangeValue');
const setValue = () => {
  // Span …