This project is archived and is in readonly mode.

#221 ✓invalid
-Oliver-

End of Slider not reachable

Reported by -Oliver- | July 14th, 2008 @ 03:53 PM | in 2.0 (closed)

Hi,

i wrote a slider with range 5-18 and steps 11. However, it is not possible to reach the end (18).

Sample code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/...">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script language="JavaScript" type="text/javascript" src="../../js/mootools-1.2-core.js"></script>
	<script language="JavaScript" type="text/javascript" src="../../js/mootools-1.2-more.js"></script>
	<style type="text/css">
		#area {
			background-color: gray;
			height: 8px;
			width: 200px;
			position:relative;
		}
		#knob {
			height: 29px;
			width: 11px;
			background-color:orange;
			cursor:move;
			position:absolute;
			margin-top:-10px;
		}
	</style>
</head>
<body style='padding:20px;'>
	<div id="area">
		<div id="knob"></div>
	</div>
	<p id="upd">XX</p>
	<script type="text/javascript">
		var mySlide = new Slider($('area'), $('knob'), {
			range: [7,18],
			steps: 11,
			snap: true,
			wheel: true,
			onChange: function(step){
				$('upd').set('html',step);
			}
		});
	</script>
</body>
</html>

Comments and changes to this ticket

  • -Oliver-

    -Oliver- July 14th, 2008 @ 03:56 PM

    Bug also exists with range 0-1 and steps 2.

    best wishes

  • -Oliver-

    -Oliver- July 18th, 2008 @ 02:46 PM

    Hi,

    first of all, to fix this problem:

    change in slider.js

    @@ javascript

    this.drag.options.grid = this.stepWidth;

    @@

    TO

    @@ javascript

    this.drag.options.grid = Math.round(this.stepWidth);

    @@

    Further, I wanted to improve the grid, because the slider changes this position after enter the position of the next step.

    To get the same behavier like scriptaculo.

    change in drag.js

    @@ javascript

    if (this.options.grid[z]){ this.value.now[z] -= (this.value.now[z] % this.options.grid[z]);}

    @@

    TO

    @@ javascript

    if (this.options.grid[z]){

    if(this.value.now[z] % this.options.grid[z] > this.options.grid[z]/2)

    this.value.now[z] += this.options.grid[z]-(this.value.now[z] % this.options.grid[z]);

    else

    this.value.now[z] -= (this.value.now[z] % this.options.grid[z]);

    }

    @@

  • -Oliver-

    -Oliver- July 18th, 2008 @ 02:47 PM

    Upps:

    Hi,

    first of all, to fix this problem:

    change in slider.js

    
    this.drag.options.grid = this.stepWidth;
    
    

    TO

    
    this.drag.options.grid = Math.round(this.stepWidth);
    
    

    Further, I wanted to improve the grid, because the slider changes this position after enter the position of the next step.

    To get the same behavier like scriptaculo.

    change in drag.js

    
    if (this.options.grid[z]){ this.value.now[z] -= (this.value.now[z] % this.options.grid[z]);}
    
    

    TO

    
    if (this.options.grid[z]){
    
    if(this.value.now[z] % this.options.grid[z] > this.options.grid[z]/2)
    
    this.value.now[z] += this.options.grid[z]-(this.value.now[z] % this.options.grid[z]);
    
    else
    
    this.value.now[z] -= (this.value.now[z] % this.options.grid[z]);
    
    }
    
    
  • Yuffster

    Yuffster July 19th, 2008 @ 06:15 PM

    • State changed from “new” to “resolved”
  • Yuffster

    Yuffster July 19th, 2008 @ 06:16 PM

    • State changed from “resolved” to “hold”
  • Benoa

    Benoa August 6th, 2008 @ 09:51 AM

    Hello,

    Did the modifications given by -Oliver-, but the problem is still here: can't reach the end of the slider.

    If I use the wheelmouse (with wheel:true), it works, though.

    The range is : [0,5]

  • Benoa

    Benoa August 6th, 2008 @ 10:16 AM

    Hmm, ok, I've made a correction, in Slider.js, in toStep: function(position). I'm not sure if this is good and solid correct, but I give it anyway :

    return this.options.steps ? Math.round(step -= step % this.stepSize) : step;

    changed to :

    return this.options.steps ? Math.ceil(step -= step % this.stepSize) : step;

    Hope it helps

  • Christoph Pojer

    Christoph Pojer November 9th, 2010 @ 06:58 PM

    • State changed from “hold” to “invalid”
    • Tag changed from 1.2, slider to slider
    • Milestone order changed from “0” to “0”
  • Mark

    Mark June 23rd, 2011 @ 08:35 PM

    I'm not sure why this was marked invalid, but I was having the same problem too. It looks like you can even click on the line to get the knob to move to the right most step, but not drag the handle. This problem doesn't seem to be resolved even in 1.3. I was able to solve this by changing:

    options.limit[this.axis][1] = this.full; to options.limit[this.axis][1] = this.full + this.stepWidth;

    in the setSnap function

    -Mark

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

Attachments

Tags

Referenced by

Pages