Multi-Slider Controller
I'm trying to build this controller in javascript but I'm having trouble starting as I'm not getting what I want when I search (I've searched for sliders or volume sliders or multi slider but what I need doesn't show).
To explain;
- There are 25 pressure controllers (the app will start with 2 but then number increases per level/stage)
- All sliders have a common MAX and MIN (lets say 0 and 100 for now)
- Each slider has a bar than has a MIN (green triangle), MAX (red triangle) and an actual (yellow triangle)
- Each of the 3 points can be moved by the user (which sends its value outside of the controller)
- The slider's MIN and MAX cannot go past the actual.
- As silly as this may sound, the MIN and MAX can be the same value as the actual.
- The previous pipeline's MIN cannot be below the next pipeline's MIN
- On as similar note, the next pipeline's MAX cannot be below the previous pipeline's MAX
- These numbers need to be sent out of the controller.
I don't have much javascript experience but so far I have a single horizontal slider with 1 moveable handle (not the triangle I want but it's a start).
I think my first step would be to get it vertical somehow, and put 2 more control points for the MIN and MAX, replicate the code to make more sliders then somehow put validations across slides.
Any help on how to proceed from here would be great. I'd rather not use libraries as we have issues when we use them (not sure if they're being blocked here).
javascript css
asked Nov 19 at 23:16
JayDesu
347
add a comment |
I'm trying to build this controller in javascript but I'm having trouble starting as I'm not getting what I want when I search (I've searched for sliders or volume sliders or multi slider but what I need doesn't show).
To explain;
- There are 25 pressure controllers (the app will start with 2 but then number increases per level/stage)
- All sliders have a common MAX and MIN (lets say 0 and 100 for now)
- Each slider has a bar than has a MIN (green triangle), MAX (red triangle) and an actual (yellow triangle)
- Each of the 3 points can be moved by the user (which sends its value outside of the controller)
- The slider's MIN and MAX cannot go past the actual.
- As silly as this may sound, the MIN and MAX can be the same value as the actual.
- The previous pipeline's MIN cannot be below the next pipeline's MIN
- On as similar note, the next pipeline's MAX cannot be below the previous pipeline's MAX
- These numbers need to be sent out of the controller.
I don't have much javascript experience but so far I have a single horizontal slider with 1 moveable handle (not the triangle I want but it's a start).
I think my first step would be to get it vertical somehow, and put 2 more control points for the MIN and MAX, replicate the code to make more sliders then somehow put validations across slides.
Any help on how to proceed from here would be great. I'd rather not use libraries as we have issues when we use them (not sure if they're being blocked here).
javascript css
asked Nov 19 at 23:16
JayDesu
347
Are you trying to build this as an HTML element, or on the canvas? If canvas, then I recommend trying to make a second handle on the same slider.
– oriont
Nov 20 at 1:36
At the moment I'm building this all as an HTML element. Should I try achieving this via canvas?
– JayDesu
Nov 21 at 4:18
I have never seen this type of slider done in html, but it seems like it would be a much better choice to use canvas. (I'm pretty sure the image you were looking at is also canvas.)
– oriont
Nov 21 at 21:20
add a comment |
I'm trying to build this controller in javascript but I'm having trouble starting as I'm not getting what I want when I search (I've searched for sliders or volume sliders or multi slider but what I need doesn't show).
To explain;
- There are 25 pressure controllers (the app will start with 2 but then number increases per level/stage)
- All sliders have a common MAX and MIN (lets say 0 and 100 for now)
- Each slider has a bar than has a MIN (green triangle), MAX (red triangle) and an actual (yellow triangle)
- Each of the 3 points can be moved by the user (which sends its value outside of the controller)
- The slider's MIN and MAX cannot go past the actual.
- As silly as this may sound, the MIN and MAX can be the same value as the actual.
- The previous pipeline's MIN cannot be below the next pipeline's MIN
- On as similar note, the next pipeline's MAX cannot be below the previous pipeline's MAX
- These numbers need to be sent out of the controller.
I don't have much javascript experience but so far I have a single horizontal slider with 1 moveable handle (not the triangle I want but it's a start).
I think my first step would be to get it vertical somehow, and put 2 more control points for the MIN and MAX, replicate the code to make more sliders then somehow put validations across slides.
Any help on how to proceed from here would be great. I'd rather not use libraries as we have issues when we use them (not sure if they're being blocked here).
javascript css
asked Nov 19 at 23:16
JayDesu
347
I'm trying to build this controller in javascript but I'm having trouble starting as I'm not getting what I want when I search (I've searched for sliders or volume sliders or multi slider but what I need doesn't show).
To explain;
- There are 25 pressure controllers (the app will start with 2 but then number increases per level/stage)
- All sliders have a common MAX and MIN (lets say 0 and 100 for now)
- Each slider has a bar than has a MIN (green triangle), MAX (red triangle) and an actual (yellow triangle)
- Each of the 3 points can be moved by the user (which sends its value outside of the controller)
- The slider's MIN and MAX cannot go past the actual.
- As silly as this may sound, the MIN and MAX can be the same value as the actual.
- The previous pipeline's MIN cannot be below the next pipeline's MIN
- On as similar note, the next pipeline's MAX cannot be below the previous pipeline's MAX
- These numbers need to be sent out of the controller.
I don't have much javascript experience but so far I have a single horizontal slider with 1 moveable handle (not the triangle I want but it's a start).
I think my first step would be to get it vertical somehow, and put 2 more control points for the MIN and MAX, replicate the code to make more sliders then somehow put validations across slides.
Any help on how to proceed from here would be great. I'd rather not use libraries as we have issues when we use them (not sure if they're being blocked here).
javascript css
javascript css
asked Nov 19 at 23:16
JayDesu
347
asked Nov 19 at 23:16
JayDesu
347
asked Nov 19 at 23:16
JayDesu
347
asked Nov 19 at 23:16
JayDesu
347
asked Nov 19 at 23:16
JayDesu
347
347
Are you trying to build this as an HTML element, or on the canvas? If canvas, then I recommend trying to make a second handle on the same slider.
– oriont
Nov 20 at 1:36
At the moment I'm building this all as an HTML element. Should I try achieving this via canvas?
– JayDesu
Nov 21 at 4:18
I have never seen this type of slider done in html, but it seems like it would be a much better choice to use canvas. (I'm pretty sure the image you were looking at is also canvas.)
– oriont
Nov 21 at 21:20
add a comment |
Are you trying to build this as an HTML element, or on the canvas? If canvas, then I recommend trying to make a second handle on the same slider.
– oriont
Nov 20 at 1:36
At the moment I'm building this all as an HTML element. Should I try achieving this via canvas?
– JayDesu
Nov 21 at 4:18
I have never seen this type of slider done in html, but it seems like it would be a much better choice to use canvas. (I'm pretty sure the image you were looking at is also canvas.)
– oriont
Nov 21 at 21:20
Are you trying to build this as an HTML element, or on the canvas? If canvas, then I recommend trying to make a second handle on the same slider.
– oriont
Nov 20 at 1:36
Are you trying to build this as an HTML element, or on the canvas? If canvas, then I recommend trying to make a second handle on the same slider.
– oriont
Nov 20 at 1:36
At the moment I'm building this all as an HTML element. Should I try achieving this via canvas?
– JayDesu
Nov 21 at 4:18
At the moment I'm building this all as an HTML element. Should I try achieving this via canvas?
– JayDesu
Nov 21 at 4:18
I have never seen this type of slider done in html, but it seems like it would be a much better choice to use canvas. (I'm pretty sure the image you were looking at is also canvas.)
– oriont
Nov 21 at 21:20
I have never seen this type of slider done in html, but it seems like it would be a much better choice to use canvas. (I'm pretty sure the image you were looking at is also canvas.)
– oriont
Nov 21 at 21:20
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384006%2fmulti-slider-controller%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384006%2fmulti-slider-controller%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are you trying to build this as an HTML element, or on the canvas? If canvas, then I recommend trying to make a second handle on the same slider.
– oriont
Nov 20 at 1:36
At the moment I'm building this all as an HTML element. Should I try achieving this via canvas?
– JayDesu
Nov 21 at 4:18
I have never seen this type of slider done in html, but it seems like it would be a much better choice to use canvas. (I'm pretty sure the image you were looking at is also canvas.)
– oriont
Nov 21 at 21:20