I am trying to customise ion-range knob (single knob or dual knob) to display current range values but couldn't succeed.
When knob is pressed, I am able to see the Pin with values but after selecting, Pin is disappeared. I tried to keep the Pin constant instead of displaying only on Knob click but couldn't succeed that as well.
I am able to display the values at the start and end of the range bar also. But I prefer to display lower and upper range values in the start and end position of Range Bar. So this didn't worked for me..
I am looking on how to customise the knob to display the lower and upper values.
My Current code is as below
<ion-range
class="padding"
[(ngModel)]="rangeValue"
dualKnobs="true"
pin="true"
min="{{ rangeData.min }}"
max="{{ rangeData.max }}"
(ngModelChange)="onValueChange($event)"
>
<ion-note slot="start">{{ rangeData.min }}</ion-note>
<ion-note slot="end">{{ rangeData.max }}</ion-note>
</ion-range>
html code
<ion-range
class="padding"
[(ngModel)]="rangeValue"
dualKnobs="true"
pin="true"
min="{{ rangeData.min }}"
max="{{ rangeData.max }}"
(ngModelChange)="onValueChange($event)"
>
<ion-note slot="start">{{ selectedData?.min || rangeData.min }}</ion-note>
<ion-note slot="end">{{ selectedData?.max || rangeData.max }}</ion-note>
</ion-range>
ts code
rangeData = {
min: 0,
max: 100,
};
selectedData = {
min: 0,
max: 100,
};
constructor() {}
onValueChange(val: any) {
this.selectedData.min = val.lower;
this.selectedData.max = val.upper;
console.log(this.selectedData);
}
Related
I've developed a bunch of bar charts in HighCharts cloud with positive and negative values.
First question:
is it possible to have the xAxis appear at the 0 line (not at the bottom of the chart)?
What I've done so far is offset the xAxis so it's placed on the 0 line, which kinda works but I was hoping for a better solution. The other method I was think was to use plotLines code on the yAxis, but I don't get the ticks:
plotLines: [{
color: '#010101',
width: 2,
value: 0,
zIndex: 5
}],
Second question:
is it possible to have the tick marks to appear between each bar, and not just the bars that have an xAxis label?
This is what's rendering for me at the moment, and I'm trying to get a tick between all the bars while showing the same number of labels https://cloud.highcharts.com/show/cLtfEDClS
First question:
You can merge this configuration into chart options in Cloud’s custom code section:
chart: {
events: {
load: function() {
var yAxis = this.yAxis[0];
this.xAxis[0].update({
offset: -yAxis.toPixels(Math.abs(yAxis.min), true)
});
}
}
},
Demo: http://jsfiddle.net/BlackLabel/6712zrod/
It automatically positions x axis so that it works as y = 0 line.
Second question:
Try setting X Axis[0] > Labels > Step to 1.
API reference: https://api.highcharts.com/highcharts/xAxis.labels.step
Explanation from Docs:
To show only every n'th label on the axis, set the step to n. Setting the step to 2 shows every other label.
By default, the step is calculated automatically to avoid overlap. To prevent this, set it to 1. This usually only happens on a category axis, and is often a sign that you have chosen the wrong axis type.
I have a line chart, with these bits of code:
tooltip: {
formatter: function() {
var tmp = '<b>'+this.series.name+'</b>';
return tmp;
}
}
and
states: {
hover: {
lineWidth: 8
}
}
}
And by and large, it works perfectly.
But if two lines share a point (they both pass through x = 0, y = 4, for example), and the mousecursor is closer to that point than the next ones along the lines, then the tooltip always returns the first series name, rather than that of whichever line is currently highlighted by hovering over it.
Is there a simple fix?
Replace the line type series with the scatter and declare lineWidth:2 param. Then set stickyTracking as false.
I'm trying to change the position of each flag in a chart and I'm using highstock.
I add each flag like this:
{
x: time,
shape: 'url(images/indicators/down_fractal.png)',
y:value,
title: ' ',
text: 'Fractal: ' + value
};
And there is my serie config:
seriesConf : {
id: this.uniqueID,
name: this.toString(),
data: this.indicatorData,
type: 'flags',
onSeries: this.options.onSeriesID, //Series ID on which this flags will be rendered
height: 10,
width: 10,
//y: 100,
//turboThreshold: 0
}
The y value is suppose to set the position of flag but its not working?is it even possible to define each flag position?
In this sample you change the y value and nothing happens.
The main i idea is to create a chart like this:
Flag series is rendered directly above the series, there is no y option for point (see API).
I think you want to use simple scatter series with markers, take a look: http://jsfiddle.net/ujgLzkq9/1/
Or use two flag series (one above, and second one below the line), using series.y option.
I am using the plugin the ColumnFilter to render filters for each column in Datatables.
ColumnFilter renders two input boxes (From & To) in order to perform 'range' filtering of a table.
I am trying to replace these input boxes with a jqueryUI slider but cannot seem to make it work.
I have managed to make a slider control two separate 'from' & 'too' inputs with the following code:
//SLIDER
$(function() {
var $slider = $('#Slider'),
$lower = $('input#Min'),
$upper = $('input#Max'),
min_rent = 0,
max_rent = 400;
$lower.val(min_rent);
$upper.val(max_rent);
$('#Slider').slider({
orientation: 'horizontal',
range: true,
animate: 200,
min: 0,
max: 400,
step: 1,
value: 0,
values: [min_rent, max_rent],
slide: function(event,ui) {
$lower.val(ui.values[0]);
$upper.val(ui.values[1]);
}
});
$lower.change(function () {
var low = $lower.val(),
high = $upper.val();
low = Math.min(low, high);
$lower.val(low);
$slider.slider('values', 0, low);
});
$upper.change(function () {
var low = $lower.val(),
high = $upper.val();
high = Math.max(low, high);
$upper.val(high);
$slider.slider('values', 1, high);
});
});
This works fine and I can see the values change in the two input boxes change as I move the slider.
However, when I swap the input#Min and inut#Max element for the the two input boxes that are rendered by the ColumnFilter plugin. Nothing seems to happen. I cannot see any values update in the input boxes and the table does not auto sort as expected.
Perhaps I am approaching this the wrong way? Is there any other way to make a slider work with Datatables and the Columnfilter plugin?
Many thanks!
The two input boxes used for filtering are being 'listened to' for change event but updating the values via UI sliders does not trigger this.
I had a similar problem and ended up just forcing change() on sliderstop (event triggered by slider on mouseup) because of the dynamic content being loaded on change which I didn't want changing on slide, but you could force change() on slide too.
try:
$lower.change();
$upper.change();
after updating the values with val();
Should work :)
Edit: I still have not resolved this issue. If anyone has advice I would appreciate it.
I have a jquery slider with two bars that the user can change to select a price range. Below the slider I display min: $xxx and max: $xxx to show the current price range. Here's the code:
$("#slider-price .slider").slider({
step: 10,
animate: true,
range: true,
min: 0,
max: 500,
values: [range_price[0],range_price[1]],
slide: function() {
range_price = $(this).slider("option", "values");
$("#low-price-label").text("Min: $"+range_price[0]);
$("#high-price-label").text("Max: $"+range_price[1]);
}
});
The slide option looks at what the value of the slider is, and updates the min and max numbers. However, they only change on mouseup, after the user is done sliding the bar. I want the numbers to update as the user is sliding the bars. How do I do this?
I use this in a media player I wrote
slide: function(event, ui) {
$("#amount").text(ui.value);
}
edit: Just re-read your question, you should be able to use 'ui.values' instead of value to return the array , parse it and go from there.
edit2: Try this function instead of the one you have.
slide: function(event,ui) {
range_price = ui.values;
$("#low-price-label").text("Min: $"+range_price[0]);
$("#high-price-label").text("Max: $"+range_price[1]);
}