Slider - Revision history

Cclewley at 15:00, 30 September 2021

2021-09-30T15:00:21Z

← Older revision		Revision as of 15:00, 30 September 2021
Line 228:		Line 228:
	===Design Choice===		===Design Choice===
	The slider has two themes that users can choose from--green and imperial blue, both contrust the white background. The thumb was made to be round so that it can display numbers better.		The slider has two themes that users can choose from--green and imperial blue, both contrust the white background. The thumb was made to be round so that it can display numbers better.
			[[Category:Slider Components]]
	[[Category:~~ImpVis~~ Components]]

Jhc4318: /* Events */

2021-07-05T09:47:12Z

Events

← Older revision		Revision as of 09:47, 5 July 2021
Line 218:		Line 218:

	Description: Set the slider value to 0 when click on the reset button		Description: Set the slider value to 0 when click on the reset button


			Name: sliderChangedbyPlay

			Triggered: Mousedown on Play button

			Description: Emit slider value whilst slider increments after pressing Play

	===Design Choice===		===Design Choice===

Jhc4318: /* Props */

2021-07-02T10:25:43Z

Props

← Older revision		Revision as of 10:25, 2 July 2021
Line 173:		Line 173:

	Default: true		Default: true

			Description: used to create a reset button for the slider


Line 192:		Line 194:
	Description: sets the delay (in ms) between incrementations when using the Play button.		Description: sets the delay (in ms) between incrementations when using the Play button.

	~~Description: used to create a reset button for the slider~~
	<div class="res-img">		<div class="res-img">
	[[File:Slider 1.png\|880x880px]]		[[File:Slider 1.png\|880x880px]]

Jhc4318: /* Props */

2021-07-02T10:25:04Z

Props

← Older revision		Revision as of 10:25, 2 July 2021
Line 173:		Line 173:

	Default: true		Default: true


			Name: playButton

			Type: Boolean

			Default: false

			Description: used to create a Play/Pause button for the slider to increment continuously upon click.


			Name: time_step

			Type: Number

			Default: 100

			Description: sets the delay (in ms) between incrementations when using the Play button.

	Description: used to create a reset button for the slider		Description: used to create a reset button for the slider

FreyaHan at 08:59, 1 July 2021

2021-07-01T08:59:28Z

← Older revision		Revision as of 08:59, 1 July 2021
Line 1:		Line 1:
	~~This page is a child of the [http:~~/~~/109.153.210.84/index.php/Sliders Sliders] page.~~		The <code>iv-slider</code> component appears as a range slider with costumised maximum and minimum values and number of ticks.

	~~The Slider~~ component appears as a range slider with costumised maximum and minimum values and number of ticks.

	<div class="res-img">		<div class="res-img">
Line 180:		Line 178:
	[[File:Slider 1.png\|880x880px]]		[[File:Slider 1.png\|880x880px]]
	</div>		</div>

			===Events===
			Name: sliderChangedbyDragging

			Triggered: Mousedown and mouseover

			Description: Emit slider value when dragging the thumb


			Name: sliderChangedbyClick

			Triggered: Mousedown

			Description: Emit slider value when changing the thumb position by clicking


			Name: click

			Triggered: Mousedown

			Description: Set the slider value to 0 when click on the reset button

			===Design Choice===
			The slider has two themes that users can choose from--green and imperial blue, both contrust the white background. The thumb was made to be round so that it can display numbers better.

	[[Category:ImpVis Components]]		[[Category:ImpVis Components]]

FreyaHan at 14:17, 30 June 2021

2021-06-30T14:17:11Z

← Older revision		Revision as of 14:17, 30 June 2021
Line 180:		Line 180:
	[[File:Slider 1.png\|880x880px]]		[[File:Slider 1.png\|880x880px]]
	</div>		</div>
	[[Category:~~Layouts~~]]		[[Category:ImpVis Components]]

FreyaHan at 14:16, 30 June 2021

2021-06-30T14:16:31Z

← Older revision		Revision as of 14:16, 30 June 2021
Line 24:		Line 24:

	Description: Used to display slider value as a bubble above the slider thumb, which follows the thumb		Description: Used to display slider value as a bubble above the slider thumb, which follows the thumb


	Name: sliderButtons		Name: sliderButtons
Line 32:		Line 33:

	Description: Used to display buttons to increase or decrease the slider value by a fixed amount		Description: Used to display buttons to increase or decrease the slider value by a fixed amount


	Name: sliderButtons		Name: sliderButtons
Line 40:		Line 42:

	Description: Used to display buttons to increase or decrease the slider value by a fixed amount		Description: Used to display buttons to increase or decrease the slider value by a fixed amount


	Name: buttonInput		Name: buttonInput
Line 48:		Line 51:

	Description: Used to display input to vary the sliderButton increase or decrease amount, applied to both equally		Description: Used to display input to vary the sliderButton increase or decrease amount, applied to both equally


	Name: lineTick		Name: lineTick
Line 56:		Line 60:

	Description: Used to display line slider ticks at each step		Description: Used to display line slider ticks at each step


	Name: numTick		Name: numTick
Line 64:		Line 69:

	Description: Used to display value slider ticks at each step		Description: Used to display value slider ticks at each step


	Name: numTick		Name: numTick
Line 72:		Line 78:

	Description: Used to display value slider ticks at each step		Description: Used to display value slider ticks at each step


	Name: playSlider		Name: playSlider
Line 80:		Line 87:

	Description: Differnet mode of slider where slider buttons move to and from the previous and next frame		Description: Differnet mode of slider where slider buttons move to and from the previous and next frame


	Name: min		Name: min
Line 88:		Line 96:

	Description: Used to set the minimum value of the slider		Description: Used to set the minimum value of the slider


	Name: max		Name: max
Line 96:		Line 105:

	Description: Used to set the maximum value of the slider		Description: Used to set the maximum value of the slider


	Name: step		Name: step
Line 104:		Line 114:

	Description: used to set the step size in the range of motion of the slider		Description: used to set the step size in the range of motion of the slider


	Name: init_val		Name: init_val
Line 112:		Line 123:

	Description: used to set initial value of the slider		Description: used to set initial value of the slider


	Name: init_val		Name: init_val
Line 120:		Line 132:

	Description: used to set initial value of the slider		Description: used to set initial value of the slider


	Name: button_step_init		Name: button_step_init
Line 128:		Line 141:

	Description: used to set the value of the sliderButtons		Description: used to set the value of the sliderButtons


	Name: tick_decimals		Name: tick_decimals
Line 136:		Line 150:

	Description: used to set the number of decimal places for the numTick		Description: used to set the number of decimal places for the numTick


	Name: tick_step		Name: tick_step
Line 144:		Line 159:

	Description: used to set the step size between each numTick		Description: used to set the step size between each numTick


	Name: theme		Name: theme
Line 152:		Line 168:

	Description: used to set the theme color of the slider (can choose from Blue and Green)		Description: used to set the theme color of the slider (can choose from Blue and Green)


	Name: resetButton		Name: resetButton
Line 163:		Line 180:
	[[File:Slider 1.png\|880x880px]]		[[File:Slider 1.png\|880x880px]]
	</div>		</div>
			[[Category:Layouts]]

FreyaHan at 10:28, 29 June 2021

2021-06-29T10:28:31Z

← Older revision		Revision as of 10:28, 29 June 2021
Line 160:		Line 160:

	Description: used to create a reset button for the slider		Description: used to create a reset button for the slider
			<div class="res-img">
			[[File:Slider 1.png\|880x880px]]
			</div>

FreyaHan at 08:40, 29 June 2021

2021-06-29T08:40:25Z

← Older revision		Revision as of 08:40, 29 June 2021
Line 9:		Line 9:

	==Techical/coding information==		==Techical/coding information==
	The Slider Component contains 15 props.		The Slider Component contains 4 sub-components, which are listed below:
			*[[Slider: bubble.vue\|bubble.vue]]
			*[[Slider: inputButton.vue\|inputButton.vue]]
			*[[Slider: lineTicks.vue\|lineTicks.vue]]
			*[[Slider: numTicks.vue\|numTicks.vue]]
			It also has 15 props:

	===Props===		===Props===

FreyaHan at 14:39, 28 June 2021

2021-06-28T14:39:25Z

← Older revision		Revision as of 14:39, 28 June 2021
Line 80:		Line 80:
	Type: Number		Type: Number

	Default: ~~false~~		Default: -1

	Description: ~~Differnet mode~~ of slider ~~where~~ slider ~~buttons move~~ to and ~~from~~ the ~~previous and next frame~~		Description: Used to set the minimum value of the slider

			Name: max

			Type: Number

			Default: 1

			Description: Used to set the maximum value of the slider

			Name: step

			Type: Number

			Default: 0.01

			Description: used to set the step size in the range of motion of the slider

			Name: init_val

			Type: Number

			Default: -1

			Description: used to set initial value of the slider

			Name: init_val

			Type: Number

			Default: -1

			Description: used to set initial value of the slider

			Name: button_step_init

			Type: Number

			Default: 10

			Description: used to set the value of the sliderButtons

			Name: tick_decimals

			Type: Number

			Default: 0

			Description: used to set the number of decimal places for the numTick

			Name: tick_step

			Type: Number

			Default: 1

			Description: used to set the step size between each numTick

			Name: theme

			Type: String

			Default: "Blue"

			Description: used to set the theme color of the slider (can choose from Blue and Green)

			Name: resetButton

			Type: Boolean

			Default: true

			Description: used to create a reset button for the slider