JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index
Elements
Classes

Element Slider

JXG.CoordsElement,JXG.GeometryElement
   ↳ JXG.Point
      ↳ Glider
            ↳ Slider

A slider can be used to choose values from a given range of numbers.

Defined in: slider.js.
Extends Glider.

Element Summary
Constructor Attributes Constructor Name and Description
 
Slider
Attributes Summary
Field Attributes Field Name and Description
 
baseline
Attributes for the base line of the slider.
 
digits
The number of digits of the slider value displayed in the optional text.
 
highline
Attributes for the highlighting line of the slider.
 
intl
Internationalization support for slider labels.
 
label
Attributes for the slider label.
 
moveOnUp
If true, 'up' events on the baseline will trigger slider moves.
 
point1
Attributes for first (left) helper point defining the slider position.
 
point2
Attributes for second (right) helper point defining the slider position.
 
postLabel
If not null, this is appended to the value and to unitLabel in the slider label.
 
precision
The precision of the slider value displayed in the optional text.
 
size
Size of slider point.
 
snapValueDistance
If the difference between the slider value and one of the elements of snapValues is less than this number (in user coordinate units), the slider will snap to that value.
 
snapValues
List of values to snap to.
 
snapWidth
The slider only returns integer multiples of this value, e.g.
 
suffixLabel
If not null, this replaces the part "name = " in the slider label.
 
ticks
Attributes for the ticks of the base line of the slider.
 
unitLabel
If not null, this is appended to the value in the slider label.
 
withLabel
Show slider label.
 
withTicks
Show slider ticks.
Field Summary
Field Attributes Field Name and Description
 
_smax
End value of the slider range.
 
_smin
Start value of the slider range.
Method Summary
Method Attributes Method Name and Description
 
setMax(val)
Sets the maximum value of the slider.
 
setMin(val)
Sets the minimum value of the slider.
 
setValue(val)
Sets the value of the slider.
 
Value()
Returns the current slider value.
Methods borrowed from class Glider:
startAnimation, stopAnimation
Methods borrowed from class JXG.Point:
face, hasPoint, isOn, makeIntersection, normalizeFace, setStyle, update, updateRenderer, updateTransform
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
Methods borrowed from class JXG.CoordsElement:
_anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, visit, X, XEval, Y, YEval, Z, ZEval
Events borrowed from class JXG.GeometryElement:
attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
Slider
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "slider".

Possible parent array combinations are:
{Array} start
{Array} end
{Array} data

The first two arrays give the start and the end where the slider is drawn on the board. The third array gives the start and the end of the range the slider operates as the first resp. the third component of the array. The second component of the third array gives its start value.


Throws:
{Exception}
If the element cannot be constructed with the given parent objects an exception is thrown.
Examples:
// Create a slider with values between 1 and 10, initial position is 5.
var s = board.create('slider', [[1, 2], [3, 2], [1, 5, 10]]);


				
				
// Create a slider taking integer values between 1 and 50. Initial value is 50.
var s = board.create('slider', [[1, 3], [3, 1], [0, 10, 50]], {snapWidth: 1, ticks: { drawLabels: true }});




				
				
    // Draggable slider
    var s1 = board.create('slider', [[-3,1], [2,1],[-10,1,10]], {
        visible: true,
        snapWidth: 2,
        point1: {fixed: false},
        point2: {fixed: false},
        baseline: {fixed: false, needsRegularUpdate: true}
    });





				
				
    // Set the slider by clicking on the base line: attribute 'moveOnUp'
    var s1 = board.create('slider', [[-3,1], [2,1],[-10,1,10]], {
        snapWidth: 2,
        moveOnUp: true // default value
    });





				
				
// Set colors
var sl = board.create('slider', [[-3, 1], [1, 1], [-10, 1, 10]], {

  baseline: { strokeColor: 'blue'},
  highline: { strokeColor: 'red'},
  fillColor: 'yellow',
  label: {fontSize: 24, strokeColor: 'orange'},
  name: 'xyz', // Not shown, if suffixLabel is set
  suffixLabel: 'x = ',
  postLabel: ' u'

});





				
				
// Create a "frozen" slider
var sli = board.create('slider', [[-4, 4], [-1.5, 4], [-10, 1, 10]], {
    name:'a',
    point1: {frozen: true},
    point2: {frozen: true}
});





				
                

				


			

			


			
				

    				 Attribute Detail
				

				
					 
					


					{Line}
					baseline

					

					

						Attributes for the base line of the slider.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						

					

				
					 
					


					{Number}
					digits

					

					

						The number of digits of the slider value displayed in the optional text.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								2
							

							

						

					

				
					 
					


					{Line}
					highline

					

					

						Attributes for the highlighting line of the slider.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						

					

				
					 
					


					{object}
					intl

					

					

						Internationalization support for slider labels.
						
							

							Defined in:  options.js.
						
						
					


					
					
					
var s = board.create('slider', [[-2, 3], [2, 3], [0, 1, 360]], {
    name: 'α',
    snapWidth: 1,
    intl: {
        enabled: true,
        options: {
            style: 'unit',
            unit: 'degree',
        }
    }
});





					
					

						
						
						
							

							
See:

							
							
JXG.Board#intl

							
							
Text#intl

							
							

						
						
							

							
Default Value:

							

								
{
   enabled: 'inherit',
   options: {}
}

							

							

						

					

				
					 
					


					{Label}
					label

					

					

						Attributes for the slider label.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						

					

				
					 
					


					{Boolean}
					moveOnUp

					

					

						If true, 'up' events on the baseline will trigger slider moves.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								true
							

							

						

					

				
					 
					


					{Point}
					point1

					

					

						Attributes for first (left) helper point defining the slider position.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						

					

				
					 
					


					{Point}
					point2

					

					

						Attributes for second (right) helper point defining the slider position.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						

					

				
					 
					


					{String}
					postLabel

					

					

						If not null, this is appended to the value and to unitLabel in the slider label.
Possible types: string, number or function.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
JXG.Slider#suffixLabel

							
							
JXG.Slider#unitLabel

							
							

						
						
							

							
Default Value:

							

								null
							

							

						

					

				
					 
					


					{Number}
					precision

					

					

						The precision of the slider value displayed in the optional text.
Replaced by the attribute "digits".
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
Slider#digits

							
							

						
						
							

							
Default Value:

							

								2
							

							

						

					

				
					 
					


					{Number}
					size

					

					

						Size of slider point.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
Point#size

							
							

						
						
							

							
Default Value:

							

								6
							

							

						

					

				
					 
					


					{Number}
					snapValueDistance

					

					

						If the difference between the slider value and one of the elements of snapValues is less
than this number (in user coordinate units), the slider will snap to that value.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
Slider#snapValues

							
							

						
						
							

							
Default Value:

							

								0.0
							

							

						

					

				
					 
					


					{Array}
					snapValues

					

					

						List of values to snap to. If the glider is within snapValueDistance
(in user coordinate units) of one of these points,
then the glider snaps to that point.
						
							

							Defined in:  options.js.
						
						
					


					
					
					
        var n = board.create('slider', [[-2, 3], [4, 3], [1, 5, 100]], {
            name: 'n',
            snapWidth: 1,
            snapValues: [1, 22, 77, 100],
            snapValueDistance: 5
        });

        var k = board.create('slider', [[-2, -1], [4, -1], [-4, 0, 4]], {
            name: 'k',
            snapWidth: 0.1,
            snapValues: [-3, -1, 1, 3],
            snapValueDistance: 0.4
        });





					
					

						
						
						
							

							
See:

							
							
Slider#snapValueDistance

							
							

						
						
							

							
Default Value:

							

								empty
							

							

						

					

				
					 
					


					{Number}
					snapWidth

					

					

						The slider only returns integer multiples of this value, e.g. for discrete values set this property to 1. For
continuous results set this to -1.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						

					

				
					 
					


					{String}
					suffixLabel

					

					

						If not null, this replaces the part "name = " in the slider label.
Possible types: string, number or function.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
JXG.Slider#unitLabel

							
							
JXG.Slider#postLabel

							
							

						
						
							

							
Default Value:

							

								null
							

							

						

					

				
					 
					


					{Ticks}
					ticks

					

					

						Attributes for the ticks of the base line of the slider.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						

					

				
					 
					


					{String}
					unitLabel

					

					

						If not null, this is appended to the value in the slider label.
Possible types: string, number or function.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
							

							
See:

							
							
JXG.Slider#suffixLabel

							
							
JXG.Slider#postLabel

							
							

						
						
							

							
Default Value:

							

								null
							

							

						

					

				
					 
					


					{Boolean}
					withLabel

					

					

						Show slider label.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								true
							

							

						

					

				
					 
					


					{Boolean}
					withTicks

					

					

						Show slider ticks.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								true
							

							

						

					
				
			


			
				

                     Field Detail
				

				
					 
					


					{Number}
					_smax

					

					

						End value of the slider range.
						
						
					


					

						
						
						
						

					

				
					 
					


					{Number}
					_smin

					

					

						Start value of the slider range.
						
						
					


					

						
						
						
						

					
				
			


			
				

					Method Detail
				

				
					 
					


					{Object}
					setMax(val)

					

					

						Sets the maximum value of the slider.
						
						
					


						
							

							
Parameters:

							
								

									{Number} val
									
								

								
New maximum value

							
							

						
						
						
						
						
							

							
Returns:

							
								
{Object} this object

							
							

						
						
						

					

					

				
					 
					


					{Object}
					setMin(val)

					

					

						Sets the minimum value of the slider.
						
						
					


						
							

							
Parameters:

							
								

									{Number} val
									
								

								
New minimum value

							
							

						
						
						
						
						
							

							
Returns:

							
								
{Object} this object

							
							

						
						
						

					

					

				
					 
					


					{Object}
					setValue(val)

					

					

						Sets the value of the slider. This call must be followed
by a board update call.
						
						
					


						
							

							
Parameters:

							
								

									{Number} val
									
								

								
New value

							
							

						
						
						
						
						
							

							
Returns:

							
								
{Object} this object

							
							

						
						
						

					

					

				
					 
					


					{Number}
					Value()

					

					

						Returns the current slider value.
						
						
					


						
						
						
						
						
							

							
Returns:

							
								
{Number} 

							
							

						
						
						

					

					
				
			


			

			


			
                
                

                    Attributes borrowed from other Elements
                


                

                
Attributes borrowed from class JXG.GeometryElement: 
dash, dashScale, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, isLabel, layer, lineCap, needsRegularUpdate, nonnegativeOnly, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, viewport, visible

                

                

                


				
				

					Fields borrowed from other Elements
				


				

				
Fields borrowed from class JXG.GeometryElement: 
_org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc
Fields borrowed from class JXG.CoordsElement: 
coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects

				

				

				

				
				

					Methods borrowed from other Elements
				

				

				
Methods borrowed from class Glider: 
startAnimation, stopAnimation
Methods borrowed from class JXG.Point: 
face, hasPoint, isOn, makeIntersection, normalizeFace, setStyle, update, updateRenderer, updateTransform
Methods borrowed from class JXG.GeometryElement: 
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
Methods borrowed from class JXG.CoordsElement: 
_anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, visit, X, XEval, Y, YEval, Z, ZEval

				

				

                

                
   				

    				Events borrowed from other Elements
                

                

                
Events borrowed from class JXG.GeometryElement: 
attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

                

                

            

		




		

			
			Documentation generated by JsDoc Toolkit 2.4.0 on Wed Oct 23 2024 15:44:16 GMT+0200 (Mitteleuropäische Sommerzeit)