标签: rangeslider

我有这个错误: TypeError:$(element).slider不是一个函数

使用以下脚本:

Rickshaw.namespace('Rickshaw.Graph.RangeSlider');

Rickshaw.Graph.RangeSlider = function(args) {

var element = this.element = args.element;
var graph = this.graph = args.graph;

$( function() {
    $(element).slider( {

        range: true,
        min: graph.dataDomain()[0],
        max: graph.dataDomain()[1],
        values: [ 
            graph.dataDomain()[0],
            graph.dataDomain()[1]
        ],
        slide: function( event, ui ) {

            graph.window.xMin = ui.values[0];
            graph.window.xMax = ui.values[1];
            graph.update();

            // if we're at an extreme, stick there
            if (graph.dataDomain()[0] == ui.values[0]) {
                graph.window.xMin = undefined;
            }
            if (graph.dataDomain()[1] == ui.values[1]) {
                graph.window.xMax = undefined;
            }
        }
    } );
} ); …

我刚刚下载了 JavaFX ControlsFX 库，但目前陷入困境。我正在使用库中的一个自定义组件，称为 RangeSlider，但需要在 CSS 中操作每个拇指的样式。我找遍了所有地方，但似乎找不到任何有用的东西。有没有办法做到这一点？我知道使用常规的 java Slider 组件，可以这样做：

.slider .thumb {
     // Style code here
 }

但是当我对 RangeSlider 使用类似的东西时，没有任何效果。这是有道理的，因为有 2 个滑块，但我已经尝试了 100 种子结构名称的组合，但没有效果。

任务：我正在尝试更改每个拇指图标，并且我也有兴趣更改两个拇指之间绘制的颜色（当前为蓝色）。

希望这是非常明显的事情，谢谢！

我正在尝试绑定一个标签,以显示在RangeSlider的上下拇指上方.

无论用户在哪里滑动,标签的位置应始终保持在各自的拇指上方.像这样:

我的方法是将侦听器连接到每个拇指,这样我就可以在每次用户滑动时将标签设置为具有适当的X/Y坐标.但是,当我运行以下代码时,我似乎无法通过css选择器获得对个人拇指的引用.

我按照这篇文章,但这只使用一个拇指,因此很容易参考.你如何在我的上下文中正确使用CSS选择器,或者如果我的存在缺陷,那么更好的方法是什么？

调节器

public class SliderDemoController implements Initializable {
    @FXML
    private RangeSlider range;
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        Pane thumb = (Pane) range.lookup(".range-slider .low-thumb");
        System.out.println(thumb); // <-- Prints null
    }
}

主要

public class SliderDemoMain extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage initStage) throws IOException {
        FXMLLoader loader = new FXMLLoader(Drag.class.getClassLoader().getResource("sliderdemo.fxml"));
        Parent root = loader.load();
        Scene scene = new Scene(root);
        Stage …

我设法使用 jQuery UI 和我在网上找到的代码片段获得了一个与数据表一起使用的范围滑块： http: //live.datatables.net/teredumi/1/edit ?html,css,js,output

它与一个滑块配合使用效果很好。我不太擅长 jQuery，而且我在让第二个范围滑块#val_range_salary在同一页面上工作时遇到了麻烦（冲突等）。对于此问题的任何帮助，我将非常感激，并且我相信其他人也会发现它很有用。

如果您知道任何 jsfiddle 或 live.datatables 已经解决了这个问题，请告诉我。

我已经构建了这个范围滑块，但想让它的行为有所不同。我想知道是否有可能使滑块手柄的值到达滑块中心时为1,000，而在右端时应为10,000。

以下是我到目前为止的代码：

$('input[type="range"]').rangeslider({
    polyfill: false,
    onSlide: function (pos, val) {
      $('input[type="text"]').val(val)
    },
    onSlideEnd: function(position, value) {
      
      const sliderValue = value;
      
      if (value >= 1000) {
        const upperLimit = Math.ceil(value/100) * 100
        const lowerLimit = Math.floor(value/100) * 100
        
        const upperWeight = Math.abs( upperLimit - value)
        const lowerWeight = Math.abs( value - lowerLimit)
        
        value = upperLimit
        
        if (upperWeight > lowerWeight) {
          value = lowerLimit
        }
      }
      
      if (value >= 10000) {
        value = 10000
      }
      
        $('input[type="range"]').val(value).change()
    },
});


$('input[type="text"]').on('blur', function (e) { …

我使用的安德烈Ruffert的rangeslider.js上iDangerous'的顶部swiper.js但每次我滑，我初始化的rangeslider，它也刺激组队，探索的触摸滑动事件，因此两者都在同一时间滑动。当我滑动 Rangeslider 时，我可以使用任何方法禁用 Swiper？我是 jQuery 的新手，所以任何帮助将不胜感激。

这是我的代码：

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!--First Slide-->
    <div class="swiper-slide"> 
    <input type="range" class="rangeslider"/>
  </div>

  <!--Second Slide-->
  <div class="swiper-slide">
    <h2>Slide 2</h2>
  </div>

  <!--Etc..-->

JS

var mySwiper = $('.swiper-container').swiper({

mode:'horizontal',
loop: true

});

$('input[type="range"]').rangeslider({

polyfill: false,

// Callback function
onSlide: function(position, value) {},

// Callback function
onSlideEnd: function(position, value) {}
});

我有一个带有滑动限制的范围滑块，我需要像这样用灰色部分重新绘制滑块。范围滑块示例

如果我从布局中保存范围值并恢复它，它会影响顶部和底部的 xaxis 范围，所以它是不对的。也许像限制范围之类的东西？

我正在尝试在 react.js 中创建一个范围滑块

rangeSlider.jsx

const RangeSlider = ({onChange}) => {

    const [slider, setSlider] = useState({
        max: 100, 
        min: 0, 
        value: 0, 
        label: ''
    });

    const onSlide = () => {
        onChange(slider.value);
    } 

    return (
        <div className="range-slider">
            <p>{slider.label}</p>
            <input type="range" min={slider.min} max={slider.max} value={slider.value} 
             onChange={() => onSlide()} className="slider" id="myRange"></input>
        </div>
    );
}
export default RangeSlider;

然后我在其他组件中使用它

 <RangeSlider onChange={(value) => sliderValueChanged(value)} />

• 如果我想传入自定义标签，我将如何更新状态来做到这一点？
• 我必须为此使用 React.memo 吗？我的理解是，每次滑块值更改时，它都会创建一个新的滑块实例。
• 我希望它最终变得健壮（步骤、多手柄、工具提示等），任何帮助表示赞赏。

当我在底部工作表上使用范围滑块时，我被困在这里，范围滑块无法工作。我收到 0 错误，所以我不知道它卡在哪里。当我在构建函数中使用该函数但不在底部工作表中时，该函数工作正常。下面是它的代码-：

RangeValues Myheight = const RangeValues(150, 180);
 
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: InkWell(
                  child: TextField(
                    controller: interest,
                    decoration: InputDecoration(
                      enabled: false,
                      suffixIcon: Padding(
                        padding: EdgeInsets.only(top: 15),
                        // add padding to adjust icon
                        child: Icon(Icons.add),
                      ),
                      prefixIcon: Padding(
                        padding: EdgeInsets.only(top: 15),
                        // add padding to adjust icon
                        child: Icon(Icons.favorite_border_rounded),
                      ),
                    ),
                  ),
                  onTap: () {
                    _bottomSheet(context, Myheight);
                  },
                ),
    );
  }


    _bottomSheet(context, myheight) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext c) {
          return Container(
            height: 250,
            child: …

如果我尝试将 ion range-slider 的默认颜色（可在此处获得：https : //github.com/IonDen/ion.rangeSlider）从红色（默认）更改为蓝色，如下所示：

.irs-slider.single {
    background: blue;
}

它变成正方形：

（最初它看起来像一条细红线： )

我究竟做错了什么？

演示

https://jsfiddle.net/chapkovski/xpvt214o/995048/

.irs-slider.single {
    background: blue;
}

$(".js-range-slider").ionRangeSlider({
        type: "single",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        grid: true
    });

.irs-slider.single {
    background: blue;
}