egorkhmelev / jslider Goto Github PK
View Code? Open in Web Editor NEWjQuery Slider plugin (THIS PROJECT IS NOT MAINTAINED ANYMORE, READ BELOW FOR MORE INFO)
Home Page: http://egorkhmelev.github.com/jslider
License: MIT License
jQuery Slider plugin (THIS PROJECT IS NOT MAINTAINED ANYMORE, READ BELOW FOR MORE INFO)
Home Page: http://egorkhmelev.github.com/jslider
License: MIT License
Hi!
I am trialing the use of the slider in Cognos 10.1 environment on a simple form with one entry field and one slider.
Note: This question is not related to Cognos, it is related to the slider behaviour.
The only issue so far is how to safely set a slider value after a page refresh based on a persistent value (within a text box which maintains state).
a) When the page is initialized, the slider functions ok (loads default value from the HTML section).
// commented out so it displays in githubb) For each page reload a java script tries to update the slider value
jQuery("#Slider1").slider("value", someValue);
This action completely trashes the slider when it is called for the first time: the values are invalid, the slider displays the range 1 .. 10 and the value is set to 10.
c) if I now refresh the page again, the slider picks up correct values and works correctly.
To sum up, I have found a way for the slider to provide the desired functionality, but am wondering why is crashes when value is set to it via this function for the first time:
jQuery("#Slider1").slider("value", someValue);
I have also noticed that you need to set a value in the in order to correctly initialize the slider
<input id="Slider1" type="slider" name="price", value="50" /> // commented out so it displays in github
If I remove the value from the HTML element and set the value in the slider init section, then the slider is not correctly initialized.
and code
jQuery("#Slider1").slider({
:
value: "50",
:
Thanks in advance, Alex Vesel
Hi,
can you tell me if jslider supports multiple ranges - that is, not just multiple selectors but ranges between those selectors?
Thanks,
John K.
At the moment it seems to only take one input for two values in a range.
<input id="Slider2" type="slider" name="price" value="5000;50000" />
Better:
<input class="Slider2" type="slider" name="min_price" value="5000" /> <input class="Slider2" type="slider" name="max_price" value="50000" />
If you specify
{
from: -5
to: -100
}
the slider behaves as if it's stuck. this is for version 1.1.0-RELEASE. Thanks!
Please help me on this question and i paste some code on it. http://stackoverflow.com/questions/12871401/egor-khmelev-jquery-slider-value-not-merging-or-changing
i not sure why the value is not merging or changing (the first pointer) is not response when the second pointer is moved from the value.
Thanks so much for the great plugin.
I was wondering if you'd considered making it work with zepto, since this plugin is aimed, at least partially, at mobile devices, and zepto is a nice lightweight jquery alternative.
I tried to make this work with zepto and had issues getting the 'value' attribute of the parameter. Switching to jquery 1.8.3 worked just fine.
Error messages:
Firefox:
Error: TypeError: value is undefined
Source File: http://localhost:8080/qunittest/src/main/www/js/lib/jquery.slider.js
Line: 626
Chrome:
Uncaught TypeError: Cannot call method 'toString' of undefined
There is an issue where the second slider group (not in the first tab) will not display the handle values in either the correct spot, and will not always move correctly when the handles are moved.
When I move the code out of the tabs, all works as expected.
Grettings,
How can you handle the event that runs when I stop moving the slide control and adjust the value to use, and so my form update automatically using the plugin?
Hi, one more time :)
In HTML5 there is Validation error on line:
<input id="price_range" type="slider" name="price_range" value="200000;750000">
Bad value slider for attribute type on element input.
type="slider" changed to type="text"
and the slider is still working :)
Is possible to have multiple selectors? As in JQueryUi Slider?
Something like :
slider({
values: [0,200,300,500],
from: 0,
to: 500,
scale: [0, '|', 200, '|', '300', '|', 500],
limits: false, step: 1
});
Thanks!
I've created a slider that works great:
$("#size-slider").slider({...options....});
i set the value of the input element so:
$("#size-slider").val(50);
I would like the location of the pointer of the slider to adjust to the new value.
I've tried:
$("#size-slider").data("jslider").update();
Thank you, Christopher
<div style="width: 500px; margin: 100px;">
<input id="Sliderxxx" type="slider" name="price" value="0;0" />
</div>
<script type="text/javascript" charset="utf-8">
jQuery("#Sliderxxx").slider({
from: 1,
to: 19,
smooth: false,
scale: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19']
});
</script>
Result: http://imageshack.us/photo/my-images/717/wrongwp.png/
Scale is too long, reason is in function generateScale() in the following line:
var prc = Math.round((100/(s.length-1))*10)/10;
The step precentage distance is rounded up to one decimal place, which is not enough:
<div class="jslider-scale">
<span style="left: 0%"><ins style="margin-left: -3px;">1</ins></span>
<span style="left: 5.6%"><ins style="margin-left: -3px;">2</ins></span>
<span style="left: 11.2%"><ins style="margin-left: -3px;">3</ins></span>
<span style="left: 16.799999999999997%"><ins style="margin-left: -3px;">4</ins></span>
<span style="left: 22.4%"><ins style="margin-left: -3px;">5</ins></span>
<span style="left: 28%"><ins style="margin-left: -3px;">6</ins></span>
<span style="left: 33.599999999999994%"><ins style="margin-left: -3px;">7</ins></span>
<span style="left: 39.199999999999996%"><ins style="margin-left: -3px;">8</ins></span>
<span style="left: 44.8%"><ins style="margin-left: -3px;">9</ins></span>
<span style="left: 50.4%"><ins style="margin-left: -6px;">10</ins></span>
<span style="left: 56%"><ins style="margin-left: -5.5px;">11</ins></span>
<span style="left: 61.599999999999994%"><ins style="margin-left: -6px;">12</ins></span>
<span style="left: 67.19999999999999%"><ins style="margin-left: -6px;">13</ins></span>
<span style="left: 72.8%"><ins style="margin-left: -6px;">14</ins></span>
<span style="left: 78.39999999999999%"><ins style="margin-left: -6px;">15</ins></span>
<span style="left: 84%"><ins style="margin-left: -6px;">16</ins></span>
<span style="left: 89.6%"><ins style="margin-left: -6px;">17</ins></span>
<span style="left: 95.19999999999999%"><ins style="margin-left: -6px;">18</ins></span>
<span style="left: 100.8%"><ins style="margin-left: -6px;">19</ins></span>
</div>
As you can see the last step is at 100.8%. Changing the line I was talking about to:
var prc = Math.round((100/(s.length-1))*1000000)/1000000;
result in distances rounded up to six decimal places:
<div class="jslider-scale">
<span style="left: 0%"><ins style="margin-left: -3px;">1</ins></span>
<span style="left: 5.555556%"><ins style="margin-left: -3px;">2</ins></span>
<span style="left: 11.111112%"><ins style="margin-left: -3px;">3</ins></span>
<span style="left: 16.666668%"><ins style="margin-left: -3px;">4</ins></span>
<span style="left: 22.222224%"><ins style="margin-left: -3px;">5</ins></span>
<span style="left: 27.77778%"><ins style="margin-left: -3px;">6</ins></span>
<span style="left: 33.333336%"><ins style="margin-left: -3px;">7</ins></span>
<span style="left: 38.888892%"><ins style="margin-left: -3px;">8</ins></span>
<span style="left: 44.444448%"><ins style="margin-left: -3px;">9</ins></span>
<span style="left: 50.000004000000004%"><ins style="margin-left: -6px;">10</ins></span>
<span style="left: 55.55556%"><ins style="margin-left: -5.5px;">11</ins></span>
<span style="left: 61.111116%"><ins style="margin-left: -6px;">12</ins></span>
<span style="left: 66.666672%"><ins style="margin-left: -6px;">13</ins></span>
<span style="left: 72.222228%"><ins style="margin-left: -6px;">14</ins></span>
<span style="left: 77.777784%"><ins style="margin-left: -6px;">15</ins></span>
<span style="left: 83.33334%"><ins style="margin-left: -6px;">16</ins></span>
<span style="left: 88.888896%"><ins style="margin-left: -6px;">17</ins></span>
<span style="left: 94.444452%"><ins style="margin-left: -6px;">18</ins></span>
<span style="left: 100.00000800000001%"><ins style="margin-left: -6px;">19</ins></span>
</div>
And the slider then looks correct: http://imageshack.us/photo/my-images/94/correcto.png/
But although GREAT plugin.
Regards
Simon
Hi,
First of all thanks for a great plugin! its really awesome!
When I tried to add an animation (show/hide) on Div with Slider the both jslider-value are stucked togather and not separate.
To see add this lines to demo:
-------- CSS
.showHide {display:none}
.open {display:block}
------- JS
jQuery(document).ready(function($) {
$("#trigger").click(function(){
if ($(this).next(".showHide").hasClass("open")) {
$(".showHide").slideUp(300);
} else {
$(".showHide").slideDown(300);
}
$(this).next(".showHide").toggleClass("open");
});
});
And wrapped #Slider3 with:
<a href="#" id="trigger">Show/Hide</a>
<div class="showHide">
<div class="layout-slider">
<input id="Slider3" type="slider" name="area" value="25;75" />
</div>
</div>
How can I fix it ?
Пример
$(function() {
jQuery("#Slider1").slider({from: 10000, to: 100000, step: 1, smooth: false, round: 0, dimension: " руб", skin: "plastic",
onstatechange : function( value ){
MyUpdate(value);
}
});
});
function MyUpdate(value) {
var split = value.split(';');
$( "#pfrom" ).val( split[0] );
$( "#pto" ).val( split[1] );
}
function MyUpdate2(option, min, max, type) {
var idFrom = "#pfrom";
var idFromTemp = $(idFrom).val();
var idTo = "#pto";
var idToTemp = $(idTo).val();
$("#Slider1").slider("value", idFromTemp, idToTemp);
}
и HTML
<div class="layout-slider" style="width: 100%">
Slider <span style="display: inline-block; width: 400px; padding: 0 5px;"><input id="Slider1" type="slider" name="price" value="35000;70000" /></span> in string
<br />
<input type="text" name="pfrom" id="pfrom" value="35000" onblur="MyUpdate2('price','0','100000','f');" />
<input type="text" name="pto" id="pto" value="70000" onblur="MyUpdate2('price','0','100000','t');" />
</div>
Получается так
в слайдере у меня значения 35,000 и 70,000
А в input полях 35020 и 70030
Если изменить 70030 на 71030 в input поле, то вместо результата 71030 мне возвращает 71020
Hi,
is there a way to make heterogenity works in one way.. like this: http://img39.imageshack.us/img39/5527/onewayslideto.jpg
with one input slider and filled up.
Hi,
thanks for this great plugin. i've been working now at the first time with it and I have two improvement suggestions:
thanks
chris
When I write same value to "to and from" plugin works strange. For example:
$("#slider1").slider({
from: 150,
to: 150,
step: 1
});
Здравствуйте Егор.
Возможно-ли в вашем слайдере jslider сделать так, чтобы движки
принимали только определенные значения, допустим из массива
var slider_Value = ['0', '35', '71', '106', '142', '177'];
Если не возможно в данной реализации, то сколько будет стоить сделать
такую возможность?
С уважением, Аркадий Седельников.
That's because the sprite is that long and the CSS doesn't use background-repeat: repeat-x for the value filling.
Hello, this looks great - I'm having an issue which I suspect is requireJS compatibility. The error is in the compressed js, and firebug reports
"b.settings.value is undefined"
I am using requireJS to load jquery - do you have a dependency on a specific Jquery version?
Thanks
Hi.
I love this slider.. Very easy to implement and customise, but one thing I have found is that it doesn't work on non-touch mobile devices because you can't drag or select the pointer.
Is there a way to make the jslider-bg clickable so that when you click on this the pointer moves to where you clicked and the appropriate value is assigned?
Apologies if this is already possible and I have missed something.
I don't want to show any digits on the slider bar.
Could you help me?
works fine in a windows Chrome, or Safari browser, and on an ipad but they wont move on either an asus transformer prime running ICS tried with opera, chrome beta, browser, and dolphin hd. also tried with the defualt browser on a 2.3.2 android phone mythouch g4. To double check it wasn't just my code I just checked your site and they don't slide.
I want two hotkeys (down,up) to instead of using mouse change the bar.
I love the plugin.
however, it does not work in internet explorer mobile. I am testing it on sdk emulator 7.1 which is "mango" and it does not work. I wish i could tell you more about why it does not work, but i am having some problems trying to get js errors.
If i get some i will share.
Thanks,
Brian
При загрузке страницы слайдер находится в скрытом блоке, когда нажимаю его показать, он не корректно отрисовывается. Но как только я изменяю размер страницы, то становится все ок. Как вручную запустить перерисовку слайдера?
$("#filter .price input").data("jslider").redraw(); пробовал, не получилось
Would be nice to have the option for only show the handler label while dragging.
Possible?
Спасибо заранее
if i change value of slider via settings
$("#product-buy-price-slider").slider("value"); // OUTPUT: "13000;17500"
// let's try to set first value
$("#product-buy-price-slider").slider("value" , '12500');
// seems fine
$("#product-buy-price-slider").slider("value"); // OUTPUT: "12500;17500"
// let's try to set whole value
$("#product-buy-price-slider").slider("value" , '12500;16500');
// WHAT?
$("#product-buy-price-slider").slider("value"); // OUTPUT: ";17500"
if i change value directly bit .val() it will not trigger move of panels and will not set correct range
how to modify whole range value??
Hi,
I want to update the slider value at runtime depending upon the data returned by Json object? As per document,
(".Slider3").slider("value",p1, p2);
the data is not getting updated?
Please advise.
Thanks!
Можно ли сделать чтобы при клике на любую область слайдера, ближайший маркер перемещался туда, как это сделано например в фильтре http://market.yandex.ru/guru.xml?CMD=-RR=0,0,0,0-PF=1801946~EQ~sel~1870347-VIS=8070-CAT_ID=109743-EXC=1-PG=10&hid=90490 (Цена)?
I'm using Trent Richardson's popular Timepicker GUI widget (https://github.com/trentrichardson/jQuery-Timepicker-Addon). It uses the slider function from jQuery UI (version 1.9.2) which appears to be rewritten in your plugin. I love your plugin and want to continue to use it but when I try to use both I get an TypeError in line 276 of your jquery.slider.js. The problem is a call to split() on apparently a non-string object.
Is there any way to avoid this? I really want to use your plugin but also be able to use at least Trent's plugin (ideally any of the plugins that use jQuery UI).
Hi,
First of all, this seem to be a great tool. Thanks for your work. But, I got an error "TypeError: Cannot call method 'split' of undefined", whenever I try to use it. Is there anything I missed? I am using jQuery 1.7.1, and UI 1.8.18. Thank you.
Its very nice to change value with slider('values', '2:10'), I tried to do same thing with limit but I am a bit lost in your Javascript code ;-(
Is is something planed or do you have any advice to achieve it ?
спасибо
Thanks for creating the great package. The problem is due to this line in the css file
.jslider .jslider-pointer { background: url(../img/jslider.png) no-repeat 0 0; }
The background in the png file is 500px long. If a slider is longer than 500px, the slider is not fully covered by whatever color of the background image. Changing "no-repeat" to "repeat" solves the problem.
Thanks again.
I have an input with id "party_size". If I try to make a slider use that ID, it renders, but none of the javascript like dragging, etc don't work. If I change the ID to "partysize", everything works fine.
if range slider is form 10 to 100 length , we have to do min to 18 and less than 18 should not be select , I am unable to do that .
Please help ........
I love this control. Very nicely done. If there were one more feature I would be completely over the moon ...
I would like to be able to highly a subsection of the range as a "recommended" range with a background color to the slider in the part of the range that is recommended. Something like this:
{
from: 1,
to: 10,
step: 1,
suggest-min: 4,
suggest-max: 6,
suggest-color: green,
dimension: ' $'
}
There is an issue when the minimum and maximum values are set by default both the maximum value of the slider.
The problem is that the maximum button is set by default above the minimum button which causes the issue that you can't slide the minimum button to the left, so the slider is stuck.
Does it support 'snap to increments' like jquery ui slider ? ( http://jqueryui.com/demos/slider/#steps )
Hi,
internet explorer 10 does not work.
works fine in compatibility view
First of all, this is a great control!
Is it possible to allow the user to click on one of the tick marks and move the slider directly to that mark?
Also, is the undocumented "smooth" setting safe to use (it's not deprecated is it?)
Thanks
Is there any way to make the slider vertical?
This is a great plugin.
I was wondering though, how do you make jquery.slider snap to increments? For example, I want to make a slider with values 1-10. I only want the slider to be placed on the integer values within the range. I don't want the slider handle to settle at a position between integer values. I didn't see such behaviour in the demos. Can it be done?
Thank You for sharing this great piece of software!!!
To support all these new touch user interfaces it would be cool if jslider would allow to have a pointer width, i.e. like this one:
$("#slide").slider({
from: 5,
to: 200,
step: 1,
round: 1,
dimension: ' km',
skin: "round",
callback: function(value) {
var userSlide = $("#slide").val();
$('#slidevalue').text(userSlide);
}
});
how can I reset the slider value in another function
resetValue: function {
// reset the slide value to 50, possible?
$("#slide").val('50');
}
Thanks
Heterogeneity parameter causes weird results if the specified value is outside the range of the slider.
For example, if the range on a slider is [0, 100] and the heterogeneity parameter is given as ['50/200'], the slider goes from 0 to 200 to 100. I suggest filtering out the relevant heterogeneity parameters like so:
// adjust the heterogeneity parameter. Only keep values that fall in the available range
for(i = 0; i < heterogeneity.length; i++) {
var value = heterogeneity[i].split("/")[1];
if(value <= maxValue && value >= minValue) {
heterogeneityCleaned.push(heterogeneity[i]);
}
}
Для добавления строки прогресса, как та что между двумя указателями при "двойном" слайдере следует добавить лишь несколько строк кода. Я бы сделал pull request но не знаю толком как.
В файле /css/jslider.css удалить строку 39
В файле /js/jquery.slider.js после строки 393 добавить:
else
this.o.value.css({ left: "0px", width: ( this.o.pointers[0].value.prc ) + "%" });
Steps to reproduce:
#1. Create a slider with the following properties:
$("#Slider").slider({
from: -50,
to: 200,
step: 5,
dimension: '%',
skin: 'blue',
scale: ['-50', '|', '0', '|', '50', '|', '100', '|', '150', '|', '200']
});
#2. Load the page.
#3. Drag the left slider over "0" marker.
Actual Result:
Value label shows "%".
Expected Result:
Value label shows "0%".
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.