[Feature Highlight] Vertical slider: before and after

[leecalcote]

[Feature Highlight] Vertical slider: before and after

[aman44444]

@leecalcote i want to work on this feature can you please assign this to me?

[aman44444]

@leecalcote could you please provide me a reference to a vertical slider and explain this feature in more detail? I'd like to understand what it should look like

[theavitw]

Is this issue resolved ? "ok" : "I would like to work on it"

[MUzairS15]

@aman44444 DO you have any updates?

[MUzairS15]

@aman44444 Do you want to know what a vertical slider is? (Google it).
In the two portions of the slider, one portion would have YAML content the other part would have an image.
First part

apiVersion: apps/v1
kind: Deployment
metadata: 
  name: backend
spec:
  selector:
    matchLabels:
      app: server
      tier: backend
  replicas: 1
  template:
    metadata:
      labels:
        app: server
        tier: backend
    spec: 
      containers:
        - name: server
          image: nginx
            - name: http
              containerPort: 80
---
....
----

Second part

[leecalcote]

@theavitw, yes, please do give this ago as well. I'm not sure if @aman44444 is still working through this or not...

[aman44444]

@MUzairS15 how is this?

[leecalcote]

@aman44444, no. One similar to this - https://levelup.gitconnected.com/how-to-create-a-before-after-image-slider-with-css-and-js-a609d9ba77bf

[theavitw]

https://reactscript.com/react-vertical-carousel/ something like this ?? @MUzairS15

[MUzairS15]

Not a carousel, but a slider. Similar to what Lee pointed out.

[aman44444]

is it ok?

[MUzairS15]

Can you screenshot an live example instead of random text?

[aman44444]

here it is

Meshery.The.Kubernetes.and.Cloud.Native.Manager.-.an.extensible.developer.platform._.Meshery.Mozilla.Firefox.2023-11-14.16-31-00.-.Trim.-.Trim.mp4

[abhijeetgauravm]

Hey @aman44444 Let's discuss this on website call today at 6:30 PM IST / 7 AM Central time. Please add this as an agenda item in the meeting minutes.

[leecalcote]

@aman44444 do you have an open PR? Let's go! This is what we're looking for (without the hideous blue color).

[abhijeetgauravm]

@aman44444 do you have an open PR? Let's go! This is what we're looking for (without the hideous blue color).

// @aman44444

[abhijeetgauravm]

Closing this as implemented by another contributor. Let's go ahead and get you onto a new issue. Thanks for your efforts here, @aman44444.
Here you'll find many good-first and help-wanted issues:
https://github.com/issues?q=is%3Aopen+is%3Aissue+archived%3Afalse+org%3Alayer5io+org%3Ameshery+org%3Aservice-mesh-performance+org%3Aservice-mesh-patterns+label%3A%22help+wanted%22+

Feel free to check these out and comment to get assigned.