I'm trying to use Ion.RangeSlider to make a slider where the color starts from the center and goes in the direction of the slider control until it hits the slider control. Right now, this is what I have:
Instead, I would like the color to go from the center of the slider to the slider control.
How can I make the RangeSlider work like that so that the color starts from the middle (as shown above)?
EDIT:
I looked at this question, but it deals with sliders with two controls instead one.
EDIT 1:
setup.js:
jQuery(document).ready(function($){
$(".slider").each(function() {
console.log($(this).attr("id"));
$(this).ionRangeSlider({
type: $(this).attr("data-slider_type"),
grid: $(this).attr("data-slider_grid"),
min: $(this).attr("data-slider_min"),
max: $(this).attr("data-slider_max"),
prefix: $(this).attr("data-slider_prefix")+" ",
postfix: " " + $(this).attr("data-slider_suffix"),
step: $(this).attr("data-slider_stepper"),
from: $(this).attr("data-slider_from")
});
$(this).on("change", function () {
var $this = $(this),
value = $this.prop("value").split(";");
});
});
});
Use: https://github.com/jordansoltman/ion.rangeSlider with has the additional boolean option: fixMiddle. For example:
$(".slider").ionRangeSlider({
fixMiddle: true,
...
});
Note: use ion.rangeSlider.js as ion.rangeSlider.min.js has not been updated.
Related
I'm using the JavaScript ion.rangeSlider library (https://github.com/IonDen/ion.rangeSlider).
It supports using two handles.
I want to be able to update the "to" handle when I change the "from" handle.
$(function() {
console.log('jQuery here!');
let zfrom = -5;
const $zslider = $("#zslider");
$zslider.ionRangeSlider({
skin: 'big',
type: 'double',
min: -5.000,
max: 5.000,
from: -5.000,
to: 5.000,
step: 0.1,
//on slider handles change
onChange: function (data) {
zslider.update({
to: -data.from,
})
},
onUpdate: function(data) {
},
onFinish: function (data) {
}
})
const zslider = $zslider.data("ionRangeSlider");
})
HTML:
<input id=zslider type=text />
The problem is that when I move the "from" handle it moves the "to" handle a little bit and then the "from" handle loses focus and I have to grab it again.
I suspect that the zslider.update is causing the onChange/onUpdate to fire and so goes into an infinite loop.
I've tried using various flags and delays, but I can't get the logic to work.
I have a work around which is to move the "to" slider after I finish moving the "from" slider (onFinish), but it isn't pretty.
I create a slider, change the orientation:'vertical' and link the "span" with it so that I can update and set the values as I drag/tap the slider. It works well, but as soon as I put the Handle at the bottom with the direction: 'rtl', span outputs undefined.
I saw the same problem on the NoUiSlider site although the slider is horizontal, but the problem is still there.
Per default, the direction of the handles of the slider is set to "ltr" or "left-to-right". When the orientation of the slider is set to vertical the Handle acts the same way, they adjust either "ltr = top-to-bottom" or "rtl = bottom-to-top".
var slider = document.getElementById('sl1');
noUiSlider.create(slider, {
start: 1,
step: 1,
connect: 'lower',
direction: 'rtl',
orientation: 'vertical',
range: {
'min': 1,
'max': 32
},
format: wNumb({
decimals: 0,
})
});
var input = document.getElementById('input-with-keypress1');
slider.noUiSlider.on('update', function(values, handle) {
input.value = values[handle]; //When the slider value changes, update the input
});
slider.noUiSlider.on('set', function(values, handle) {
input.value = values[handle];
JsFiddleDemo
I don't know why, but it seems the External Resource links won't render the slider, Excuse me but I'm a noob and maybe I just got the syntax wrong (works local though)..
I create time counter using Knob:
$(function($) {
$(".knob").knob({
'fgColor': '#b9e672',
'thickness': 0.3,
'width':150,
'data-min': 0,
'data-max': 30,
'readOnly': true
});
var initval = 30;
$({value: 0}).animate({value: initval},{
duration: 10000,
easing:'swing',
step: function()
{
$('.knob').val(this.value).trigger('change');
}
});
});
I want to display counter in milliseconds, like picture:
how to do this?
thanks,
You can use the step option to chose the step that you would update in your knob value.
There is also another useful thing you can do, that is set the draw function. The draw function determines what gets drawn in the label. By default, it matches the value, but you don't have to.
For instance, if you want to update the knob in milliseconds, but want to round the value to display only the full seconds in the label, you could do something like:
draw: function () { $(this.i).val(Math.round(this.cv)); }
where, accordingly to the comments on the jQuery-knob source, this.cv is the "change value ; not commited value", and this.i the "mixed HTMLInputElement or array of HTMLInputElement"
I have a button that when clicked creates a slider.
HTML:
<a id="slider"class = "button small">Create Slider</a>
JS:
$('#slider').click(function(eventClick, posX, posY){
var htmlData='<div id="sldr'+$.count+'" class="draggable"' + 'data-page="' + $.page + '" ';
htmlData += 'style="height:25px; width:360px"><input id="movingslider'+$.count+'" class="sldr" type="text" data-slider="true" data-slider-range="10,1000"><span class="output"></span></div>';
var temp = $.count
$('.demo').append(htmlData);
$('#movingslider'+temp).simpleSlider();
$('#movingslider'+temp).bind("slider:ready slider:changed", function (event, data) {
$(this).nextAll(".output:first").html((data.value.toFixed(3)));
});
$('#sldr'+temp).draggable({
containment: "#workspace",
scroll: false,
cancel: false,
}
})
$('a.delete').on('click',function(e){
e.preventDefault();
btnID = $(this).closest('.draggable')[0].id;
//alert('Now deleting "'+objID+'"');
$('#'+btnID+'').remove();
});
$.count++;
});
I'm having some problem with the values of the newly created slider. I've indicated that the ranges should be from 10-1000 but when I started scrolling the slider, it shows the default range, 0-1. How could I change the range printed?
Within the configuration of the slider you can specify the range and steps:
data-slider-range:
The range representing the start and end of the slider. Eg. data-slider-range="10,1000"
data-slider-step:
The interval to move when dragging the slider. Eg. data-slider-step="100"
then you can access the value of the slider as:
$("#movingslider").bind("slider:changed", function (event, data) {
// The currently selected value of the slider
alert(data.value);
// The value as a ratio of the slider (between 0 and 1)
alert(data.ratio);
});
In my project, I am trying to add the tip text (config) dynamically to a slider. How to do that?
I need to add it dynamically because I am generating the array of variables in a "Controller", which holds the text for each value of the slider (for tip text).
var slider = Ext.getCmp('slider')
slider.setTipText(arrayOfVariables) //What should I do here instead?
There is no such method like setTipText in docs. What should I use then?
EDIT:
{
xtype:'slider',
animate: false,
//plugins: [Ext.create('App.view.SliderOverride')],
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 36/2, //must be current month
//increment: 10,
minValue: 1,
maxValue: 36,
useTips: true,
tipText: function(thumb){
alert("hello");
App.getController('TaskController')._arrMonthView[thumb.value].month;
},
},
tipText requires a function config so you can add a function that will use your variables from controller;
Ext.create('Ext.slider.Multi', {
....
tipText: function(){
return App.getController('your controller').yourVariable
},
.....
});
This is added on the creation of the slider so you don't need to modify it , just your variables in controller. So you don't need to re set the tip text function.
I solved this issue by using getText method of Ext.slider.Tip.
Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider Thumb that the Tip is attached to. Override to customize.
For example in which situation it can be used, you have a look at this link