Handles
The number of handles can be set using the start
option. This option accepts an array of initial handle positions. Set one value for one handle, two values for two handles.
$('#slider-handles').noUiSlider({
start: [ 4000, 8000 ],
range: {
'min': [ 2000 ],
'max': [ 10000 ]
}
});
Range
All values on the slider are part of a range. The range has a minimum and maximum value.
$('#slider-range').noUiSlider({
start: [ 4000 ],
range: {
'min': [ 2000 ],
'max': [ 10000 ]
}
});
$('#slider-range').Link('lower').to($('#slider-range-value'));
Stepping and snapping to values
The amount the slider changes on movement can be set using the step
option.
$('#slider-step').noUiSlider({
start: [ 4000 ],
step: 1000,
range: {
'min': [ 2000 ],
'max': [ 10000 ]
}
});
$('#slider-step').Link('lower').to($('#slider-step-value'));
Non-linear sliders
noUiSlider offers some powerful mechanisms that allow a slider to behave in a non-linear fashion. You can create sliders with ever-increasing increments by specifying the value for the slider at certain intervals. Note how the handle in the example below starts at 30% of the slider width, even though 4000
is not 30% of the span between 2000
and 10000
.
$('#slider-non-linear').noUiSlider({
start: [ 4000 ],
range: {
'min': [ 2000 ],
'30%': [ 4000 ],
'70%': [ 8000 ],
'max': [ 10000 ]
}
});
$('#slider-non-linear').Link('lower').to($("#slider-non-linear-value"));
Stepping in non-linear sliders
For every subrange in a non-linear slider, stepping can be set. Note how in the example below the slider doesn't step until it reaches 500
. From there on, it changes in increments of 500
, until it reaches 4000
, where increments now span 1000
.
$('#slider-non-linear-step').noUiSlider({
start: [ 500, 4000 ],
range: {
'min': [ 0 ],
'10%': [ 500, 500 ],
'50%': [ 4000, 1000 ],
'max': [ 10000 ]
}
});
$('#slider-non-linear-step').Link('lower').to($('#slider-non-linear-step-value'));
Snapping between steps
When a non-linear slider has been configured, the snap
option can be set to true
to force the slider to jump between the specified values.
$('#slider-snap').noUiSlider({
start: [ 0, 500 ],
snap: true,
connect: true,
range: {
'min': 0,
'10%': 50,
'20%': 100,
'30%': 150,
'40%': 500,
'50%': 800,
'max': 1000
}
});
$('#slider-snap'
http://refreshless.com/nouislider/slider-values/
相关推荐
演示 ###安装: bower install angular - responsive - slider - directive ###选项 min : Maximum slider value.max : Minimum slider value.step : Slider values will be multiples of step. Handle snaps ...
C++ 使用滑块设置颜色值,改变RGB值选择绘值背景颜色. (C++ using the slider to set the color value, change the RGB values to select the background color of the plotted values.)
数据驱动的范围滑块 为您的网络应用程序添加交互性 基于 D3 和 svg 的数据驱动范围滑块,具有良好的性能 查看 查看示例 (更新最多) 查看多个库和框架集成 集成 ... values . length ) . onBrush
React范围 ! 安装 ... state = { values : [ 50 ] } ; render ( ) { return ( < Range xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed> this . setState ( { values }
自定义外观的滑杆(Slider),源码ASValueTrackingSlider,ValueTrackingSlider是一个UISlider子类,实时展示了popUpView值的改变。该版本使用了CALayers,提供了多个功能,并可简单自定义外观。 测试环境:Xcode 5.0...
以动画方式切换setBaseOrientation(int orientation)Set the orientation of the panels with the values LinearLayout.VERTICAL or LinearLayout.HORIZONTAL, default is LinearLayout.HORIZONTAL.设置排列方式,...
###Usage 要启用滑块,只需传递滑块元素(即波谷)的 id,如下所示: var slider = new SlideMe ( 'elementId' , options ) ; 选项如下: 一个values对象字面量,其中包含: min 、 max和默认value 。 decimalPlace...
- NEW: Redesigned the scroll bar and the slider components. They now also derive from a new common class (Progress Bar). - NEW: UIButtonKeyBinding has been replaced with UIKeyBinding and its ...
values : [ 300 ], max : 500 , min : 0 , onDragging : (handlerIndex, lowerValue, upperValue) { _lowerValue = lowerValue; _upperValue = upperValue; setState (() {}); }, ) 要使滑块Right To Left...
RangeSlider - a slider which allows you to select two values to form a range JideScrollPane - column and row footer support for JScrollPane SimpleScrollPane - a scroll pane having four scroll ...
React-Pretty-Carousel 轻松将精美的轮播添加到您的网站! 在docs上查看演示!...External Functions and Values 您可以通过导入和使用以下功能来在轮播中进行召唤和移动/导航: import { CarouselWrapper ,
Also includes a helpful example.<END><br>15 , progress.zip This is an example on how to use the Progress Bar included with Microsoft's Visual Basic.<END><br>16 , slider.zip "This is a sample of...
values displayed from that stored in database without using a lookup table. Allows you to display understandable text versions of stored codes in your table. TRxDBGrid provides you with the ability ...
1,01.zip 3D Text 显示3D文字(6KB)<END><br>2,02.zip A button within a button 按纽中的按纽(13KB)<END><br>3,03.zip Flat Owner Drawn Buttons 浮动的自画按纽(13KB)<END><br>4,04.zip Flat-...
Handling Time Values CTime Performing Time Math COleDateTime The Year 2000 Exception Handling Exceptions and MFC MFC Macros vs. Standard Exception Handling Win32 Structured Exception Handling ...
values displayed from that stored in database without using a lookup table. Allows you to display understandable text versions of stored codes in your table. TRxDBGrid provides you with the ability ...