jquery slider with multiple handles (dynamically add and remove handles) - javascript

What I want to achieve is to make it possible to the user to define as many ranges inbetween a start-value 0 and a max value, i.e. 1000. I thought about how to do this in the best way and I came up with either idea:
Either I could dynamically add and remove sliders on the fly to the page. Make the min-value of the first slider fixed to 0. And somehow link them, i.e. when changing the upper-value of the N-th slider, automatically adapt the lower-value of the (N+1)th slider and vice versa. Problem is that it's some hassle to get this working as I need to also adapt the previous slider (N-1) and next slider (N+1) when removing the slider N inbetween.
Then I thought of the following:
Have ONE slider with a fixed lower-value to 0 and with at least two handles, where the user can add and remove handles on the fly himself. There wouldn't be any gaps allowed, i.e. every pair of consecutive two handles would always define one range. Something like this:
jsfiddle.net/NkjQr/1781/ (this example would define two ranges) with fixed value at 0 and on the fly add/remove handles. Is this possible? Couldn't find any jquery plugin to do this easily...
Or do you know an even better solution? Im looking for the one which is the most easy to implement myself.
Thanks a lot

Related

Vue-draggable-next: increase detection range for empty list

I am using Vue-draggable-next along with Vue 3 to implement draggable lists. My application sometimes requires users to drag items from other lists into initially empty lists. I found that the dragging detection area is determined by how much space its elements are occupying: when there is no item in a list, it is super frustrating to drag one into the list because the detection area is soooooo small (only a dozen pixels at the start of the list on the page). This is demonstrated by the following GIF:
Is it possible to somehow set the detection range height of each list?
with this property you can expand the gap empty area:
:emptyInsertThreshold="50"
The parameter I received is positive numbers, try it, it worked for me.
you can easily solve this problem by adding a minimum size to the draggable, min-heigh: 200px this is because the drop zone is not specified and needs a min-height to be set

Make elements move across smoothly when changing position css

I am trying to create a number flip effect using the number-flip npm package as a basis. I wish to make it similar to Robinhood's stock ticker (when scrubbing across a stock chart).
I have been able to customise the base number-flip package so that leading zeros and commas are removed when not necessary. However when the number of digits increases, the rest of the digits simply jump over to the right in position. I would like them to be smoother when moving over.
The current way I do it is, any leading zeros/commas are simply hidden using the position property and then if they are required, they are made visible again. This hiding/unhiding causes all the visible numbers to jump across and make it unsmooth.
I have linked code sandbox below:
https://codesandbox.io/s/nostalgic-taussig-ymfn9?file=/src/index.js
Thank you very much for your help

how to label leaflet slider

i am using the leaflet slider by[dwilhelm89][1], i'm letting it slide through days( i made each day a layer and added it to the slider) but i need to add a label(timeline) so that you can see where the slider will go, any idea how to do that? thanks
var sliderControl = L.control.sliderControl({ position: "topright", layer: layerk, range: true, follow:true,alwaysShowDate : true});
map.addControl(sliderControl);
sliderControl.startSlider();
this code is what i used to make the slider, any options or edits i can use? [1]: https://github.com/dwilhelm89/LeafletSlider
If you mean adding a scale with tick marks, the LeafletSlider doesn't seem to have any options for that. Though I don't have any suggestions for modifying or extending the LeafletSlider code, a couple other approaches spring to mind:
First, if you are only dealing with a few days, and you just need a few labels along the length of the slider, it may be possible to adapt one of the examples from the answers to this stackoverflow question. The top-voted answer in particular looks promising, as it is probably the simplest solution.
[EDIT: After looking into the Leaflet Slider code a bit more, I realised that it does not actually filter the data by the quantity in the time field. It simply steps from one feature to the next as you slide it (i.e. an interval of two seconds is treated the same as an interval of two years). Thus, this first method actually will not work with LeafletSlider unless the time field is monotonically increasing, or very nearly so, from one feature to the next.]
Second, you could adapt another non-Leaflet-specific slider to do the job, like the jQRangeSlider, which has some pretty decent options for scales. Here is an example of that approach:
http://fiddle.jshell.net/nathansnider/p850sr8y/
In addition to the slider itself, it consists of a custom control, which allows you to place the slider on the map, and a function to filter the data, which is called each time the slider is moved. If you want further details on this, I'd be happy to elaborate.

Animation of features in OpenLayers3

I was curious about the possibilities of animating features in OpenLayers3.
I'm very aware of the examples presented here
http://openlayers.org/en/v3.0.0/examples/animation.html and here
https://gis.stackexchange.com/questions/26546/openlayers-animation-examples-and-algorithms
However, the official examples for OL3 don't quite fit my needs.
Let's assume that I have a layer (geojson for instance) that has a "time" column with lots and lots of time values.
I'd like to implement something like a slider that adds/removes features (or changes their style) depending on the user's actions.
The thing is that there are some APIs that might be able to do that, but they seem to be outdated (code examples were still working with ol2).
Do you have any suggestions on how to build a simple animation slider with OL3?
EDIT: It doesn't necessarily have to be proper animation. A possibility that came to my mind is changing the style of a layer whenever the slider is moved. Still no clue though on how to realise that.
This image illustrates what I have in mind:
EDIT: My current approach is to have a slider, that triggers code everytime it is moved. I somehow try do change the layer style dynamically, but I still haven't gotten a viable result.
Ok. I've come up with a solution myself. It's not really a full-fledged animation, but it works for me.
Basically what I do is that I load a wfs-layer to my map.
Now, here is the trick:
When I do that, I simply sort the time-values of the features one by one and add every feature with the time value of 1 to one layer, every feature with a time value of 2 to another and so and so forth.
This basically does the trick. The rest is simple.
Next step is that I implement a slider that ranges from 1 (the lowest time value) to whatever the highest time value is. Everytime the slider is moved it triggers an event that finds out to which time value the slider is set to and then adds/removes the corresponding layers.
So, if the slider is set to 5. It will add every layer from 1 to 5 to the map and remove every other layer. Again, this is not really an animation, but it does work in my case.
If anyone comes up with another possible solution, please post it here. I'd appreciate it.
(Btw, this is what my solution looks like in action:)
EDIT: I can now also confirm that it is possible to build "proper" animations with this approach. I simply built a js-function that includes multiple "setTimeout"s to time when a layer is added and added a play button that triggers this function. This amounts to an animation that visualises the growth from t=1 to tmax.

Dual slider control with custom skin

I'm currently trying to create a page for users to select two points from a range, using a slide control. The first point in the range is when an alert will be sent to the user, the second point is a max limit. What I would like to do is have the bar colored green from the 0 point to the first slider point, then orange between the two sliders, and lastly red from the second slider up to the other end of the bar.
Does anyone know of an easy was I can do this or of a slider control that can be skinned to do this?
I didnt manage to find a slider that did exactly what I was after. I ended up going with the JQuery UI slider as seen here. It's a very nice slider although it has its issues it was the simplest one I could find that was still a close match to my original specifications.
This seems to be what you want. See the Mootools documentation for details.

Categories